简介
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
核心
Ajax引擎XMLHttpRequest
创建XMLHttpRequest对象
- var ajax = new XMLHttpRequest();//应用于主流浏览器,一般写法
- var ajax = new ActiveXObject("Msxml2.XMLHTTP");//低版本ie
- 可以通过if(window.XMLHttpRequest){....}else if(window.ActiveXObject){....}进行判断。
XMLHttpRequest常用属性
1.readyState属性
类型:number,有5个值分别为0,1,2,3,4
- 0---代表XMLHttpRequest已经建立,但还没有初始化
- 1---代表open发放已经调用,但未调用send方法,请求提出,没有发送
- 2---代表send方法已经调用,请求发送
- 3---代表请求发送成功,服务器正在响应
- 4---代表请求完成,数据成功接收
2.responseText属性
类型:String
- 返回包含客户端接收到的HTTP响应的文本内容
3.responseXML属性
类型:Document
- 返回 XML 文档对象
4.status属性
类型:number
描述http状态码
- 1XX:代表请求已被接受,需要继续处理,这类响应是临时响应(消息)
- 2XX:代表请求已成功被服务器接收、理解、并接受(成功)
- 3XX:代表需要客户端采取进一步的操作才能完成请求(重定向)
- 4XX:代表了客户端看起来可能发生了错误,妨碍了服务器的处理(请求错误)
- 5XX:代表了服务器在处理请求的过程中有错误或者异常状态发生(服务器错误)
- 600:源站没有返回响应头部,只返回实体内容
一般只用到200(OK)、404(请求资源未找到)、405(请求方法不被服务器支持)、500(服务器源码错误)
XMLHttpRequest常用方法
1.open(method, url, async, username, password)
- method表示请求方式"get"和"post"
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
以下情况中,用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
以下情况中,用GET方法:
- 请求是为了查找资源,HTML表单数据仅用来帮助搜索。
- 请求结果无持续性的副作用。
- 收集的数据及HTML表单内的输入字段名称的总长不超过1024个字符。
- url表示请求发送到服务器的相应url,自动解析成绝对地址
- async, username, password是非必填项
- async表示请求方式是异步(true)还是同步(false),默认是异步(true)
2.send(body); ---@param {Object} body
如果请求方式为get,body为null
如果请求方式为post,body为请求参数,必须设置请求头setRequestHeader('Content-type','application/x-www-form-urlencoded');
3.setRequestHeader(header,value)
设置请求头
例如setRequestHeader('Content-type','application/x-www-form-urlencoded');
设置传输数据类型,即服务器需要我们传送的数据类型
XMLHttpRequest之onreadystatechange事件
每当readyState的值变化时,都会触发该事件,所以正常情况下,一次请求完成会触发5次
使用流程
function getData(){
//创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){//主流浏览器支持ajax
ajax = new XMLHttpRequest();
}else if(window.ActiveXObject){//ie
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
//重写onreadtatemechange函数(声明函数)
ajax.onreadystatechange=function(){
if(ajax.readyState==4){//响应成功
if(ajax.status==200){
//获取响应内容
var result = ajax.responseText;
//获取元素对象,并显示结果
document.getElementById("show").innerHTML=result;
}else if(ajax.status==404){
document.getElementById("show").innerHTML='请求资源已失效';
}else if(ajax.status==500){
document.getElementById("show").innerHTML='服务器繁忙';
}else{
document.getElementById("show").innerHTML='其他错误'+ajax.status;
}
}
}
//发送请求
ajax.open("get","ajax");
ajax.send(null);
}
之后便可以在ajax中处理请求
jQuery中的ajax
。。。。。。