【JS-Ajax相关知识(二)】

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;
}
}

posted @ 2018-01-29 18:10  Sugar_lzr  阅读(149)  评论(3编辑  收藏  举报