先对原生Ajax进行理解:
Ajax=异步JS和XML,用于创建快速动态网页的技术
可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
工作原理
对于Ajax的使用和实现---很重要
(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
var xmlHttp;
if(window.XMLHttpRequest){ //针对除IE6以外的浏览器
xmlHttp = new XMLHttpRequest(); //实例化一个XMLHttpRequest
}else{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //针对IE5,IE6
}
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
xmlHttp.open(‘get‘,‘demo_get.html‘,‘true‘);//调用open()方法并采用异步方式
如果需要像 HTML 表单
那样 POST 数据,请使用setRequestHeader()
来添加 HTTP 头。然后在send()
方法中规定您希望发送的数据:
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
提示:POST请求的特点如下:
· POST 请求不会被缓存
· POST 请求不会保留在浏览器历史记录中
· POST 请求不能被收藏为书签
· POST 请求对数据长度没有要求
(3)设置响应HTTP请求状态变化的函数.
xmlHttp.onreadystatechange()=>{
if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
// 你需要执行的事件
}
}
响应状态码----常见
200: “OK”
· 304:该资源在上次请求之后没有任何修改(这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意)。
· 403 (禁止) 服务器拒绝请求。
· 404 (未找到) 服务器找不到请求的网页。
· 408 (请求超时) 服务器等候请求时发生超时。
·500 (服务器内部错误) 服务器遇到错误,无法完成请求。
xmlHttp.send(); //使用open()方法将请求发送出去
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新
所以一个完整的ajax请求调用代码如下
<script>
//step1.创建XMLHTTPRequest对象,对于低版本的IE,需要换一个ActiveXObject对象
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
//>>step2.使用open方法设置和服务器的交互信息:
//设置请求的url参数,参数一是请求的类型,参数二是请求的url,参数三指定是否使用异步,默认是true
xhr.open("post", "", true);
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//>>step3.发送请求 GET请求不需要参数,POST请求需要把body部分以字符串或者FormData对象传进去。
xhr.send();
//>>step4.注册事件 onreadystatechange 状态改变就会调用
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { // 成功完成
// 判断响应结果:
if (xhr.status === 200) {
// 成功,通过responseText拿到响应的文本:
console.log(xhr.responseText);
} else {
// 失败,根据响应码判断失败原因:
console.log(xhr.status);
}
} else {
// HTTP请求还在继续...
}
}
</script>
参考资料: