继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JavaScript学习笔记028-ajax0get0post0跨域请求

慕哥9229398
关注TA
已关注
手记 1241
粉丝 199
获赞 913

Author:Mr.柳上原

  • 付出不亚于任何的努力

  • 愿我们所有的努力,都不会被生活辜负

  • 不忘初心,方得始终

面试的时候问了点简单的es6知识

然后跟我说公司开发用的是react

回家啃了几天的react

正式上班的时候

用的是react-native

对于只学了vue和小程序框架的我来说

这种大起大落的感觉真是超级刺激

不知道自己能不能够在公司站稳脚跟

函数式编程和面向对象编程

不同的两个模式

挑战一下自己吧

<!DOCTYPE html> <!-- 文档类型:标准html文档 --><html lang='en'> <!-- html根标签 翻译文字:英文 --><head> <!-- 网页头部 --><meat charset='UTF-8'/> <!-- 网页字符编码 --><meat name='Keywords' content='关键词1,关键词2'/><meat name='Description' content='网站说明'/><meat name='Author' content='作者'/><title>前端59期学员作业</title> <!-- 网页标题 --><link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 --><style type='text/css'> /*内部样式表*/</style></head><body> <!-- 网页主干:可视化区域 --><script>/*
ajax:
与后台进行数据交互
异步的JavaScript 和 XML
ajax通过http协议请求数据
无刷新页面进行数据加载

http1.0三种请求方法:
GET
POST
HEAD
http1.1:
DELETE
PUT
与后台交互时,约定俗成的请求规范
增 POST
删 DELETE
改 PUT
查 GET

xhr.readyState状态码:
0 请求未初始化
1 连接到服务器
2 请求以被接收到
3 正在处理请求
4 请求处理完成,并响应
xhr.status(服务器)http状态码:
100~ 消息
200~ 成功
300~ 重定向
400~ 请求错误
500~ 服务器错误
*/// 生成ajax对象const xhr = new XMLHttpRequest();// 通过open方法,设置跟后台交互的一些行为xhr.open("GET", "http://www.xxx.cn", true); // 第一个参数为请求方式,第二个参数是url地址,第三个参数是布尔值,设置是否使用异步请求// 按照上面设置好的方式发送数据xhr.send();// 监听数据发送,结束行为xhr. = () => {// 判断自身状态码,4代表成功if (xhr.readyState === 4){ // xhr.readyState是xhr自身的状态码// 判断http状态码,2开头的和304代表成功if (200 <= xhr.status && xhr.status < 300 || xhr.status === 304) {// 请求成功,拿到后台发来的数据xhr.responseText;
}
}
}// 两种方法类似,监听数据发送,onreadystatechange监听数据发送状态发生变化的过程// xhr.onreadystatechange = () => {}/*
get:
get方式的数据发送
查询字符串以键值对的方式,在get请求中的url地址中发送
以?开头,键与值之间=连接,不同键值对之间&连接
输入url地址后,浏览器默认get方式发送请求
*/// 中文会被转换成URI编码encodeURI("风屿"); // 中文转URIdecodeURI(""); // URI转中文// get发送数据user: "fengyu",password: 123xhr.open("GET", "http://www.xxx.cn?user=fengyu&password=123", true);/*
post:
post方式的数据发送
post发送数据必须设置请求头信息,数据作为send的参数发送
*/// post发送数据xhr.open("POST", "http://www.xxx.cn?user=fengyu&password=123", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // post请求头xhr.send("user=fengyu&password=123");/*
跨域:
默认不能进行跨域请求
请求会被浏览器阻止

域:
环境
不同的url地址是不同的域
相同地址下不同的端口是不同的域
实现跨域:
JSONP  通过script的src
CORS  在后台程序里设置对应的域进行访问
代理  通过信任的服务器进行代理请求
*/</script></body></html>



作者:Mr柳上原
链接:https://www.jianshu.com/p/7d3efdf6cee3


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP