JS-Ajax相关知识

Posted 2020-10-22 Sugar_lzr

GET请求和POST请求的选择情况：
1、如果请求的数据量特别大或者需要有上传功能的话，必须使用POST请求。
2、GET请求相对于POST请求来说，安全性略差，如果要请求的数据具有严重的
隐私性的话，建议使用POST请求。
3、如果仅仅是数据查询的操作，建议使用GET请求。
4、如果是其他操作，建议使用POST请求。

【同步和异步】
同步：相当于请求一次过后，要等到这次请求的响应后，才能继续下一次请求。
异步：请求一次后，不需要等到这次请求的响应后，就可以进行其他请求。

【Ajax】
Ajax异步的javascript和XML，也就是说，Ajax就是通过javascript语言，去异步
请求之后，得到响应，局部刷新代码。
两个特点：异步请求、局部刷新。

【Ajax的原生开发流程】
1、创建请求对象（异步）
创建核心的XMLHttpRequest请求对象，Ajax编程都是通过这个对象来进行的。
注意：浏览器对XMLHttpRequest对象的支持有所不同。
1）大部分主流浏览器都支持XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2) IE6
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
3) IE6以下
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

2、打开与服务器的链接
创建完请求对象后，通过请求对象的open()方法，这个方法可以与服务器
建立链接。
open(method, url, flag);
三个参数：
1、表示用什么请求方式。GET 、POST等。
2、要请求服务器的路径，如果你用的是GET请求，有参数的话，要拼接在URL
后面。
3、表示是否是异步请求，默认是异步的。

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://10.xxx.xxx.xxx:8080/?name=liu&pwd=123", true);

3、发送请求
与服务器建立链接后，在利用请求对象的send()方法去发送请求。
如果用的是GET请求，send方法内的参数写null就行，如果是post请求，请求有参数
的话，那么请求参数要写在这个send方法内。

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://10.xx.xx.xx:8080/", true);
xhr.send(null);

//注意：如果是POST请求，那么在调用send方法之前，要设置请求头。
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

4、接收服务器响应
当请求对象调用完send方法后，就可以等待服务器的响应，请求对象会根据
响应的不同状态而触发onreadystatechange事件。

【请求对象的几种状态码：】
0：未初始化完成，只是创建了XMLHttpRequest对象，还未调用open方法
1：初始化完成，请求开始，开始调用open方法，但没调用send方法
2：请求发送，就是说已经调用了send方法
3：开始接收服务器的响应。
4：读取接收服务器响应后返回的数据。（响应彻底结束）

当状态吗为2、3、4的时候，会触发onreadystatechange事件
可以利用请求对象的readyState属性来查看当前的状态吗。
真正开发的时候，我们只关心状态吗为4的时候。

【服务器响应的状态吗】
200：响应正常（这就是我们最后想要的状态吗）
404：找不到要访问的URL
500：服务器方面的错误。

我们可以利用请求对象的status属性来查看服务器状态吗。

var xhr = new XMLHttpRequest();
xhr.open("GET", "xxx.html", true);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//返回的json字符串
xhr.responseText;
}
}