ajax是一种无须刷新页面就能为页面中的某部分加载数据的技术,其原理是通过XMLHTTPRequest对象请求服务器获取信息,转换成字符串,以DOM操作添加到页面,从而实现无须刷新即可加载数据。
使用ajax时浏览器会先向服务器发送一个请求,然后服务器响应并且返回了这个请求(通常是HTML、XML和json格式),最后浏览器处理了返回的内容并且将其添加到了页面上。
请求过程:
var xhr = new XMLHttpRequest(); //创建一个XMLHttpRequest的实例对象xhr.open('GET','data/test.json', true); //open方法会准备一个请求,这个请求有三个参数,1HTTP方法 2处理请求的页面地址 3是否异步xhr.send(null); //send方法将准备好了的请求发送到服务器
ajax的对象在IE5,IE6使用ActiveXObject对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //兼容IE5,IE6
open第一个参数HTTP方法有两个请求,一个是GET请求,一个是POST请求。
第二个参数是处理页面的地址
第三个参数:true代表异步请求,false代表同步,异步是指处理请求的时候可以继续执行后面的代码,同步则是必须等服务器响应返回了结果之后才会执行后续代码
响应:
xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200){ document.getElementById('content').innerHTML = xhr.responseText; } }
onreadystatechange 存储一个函数(或函数名),没当readyState状态发生变化时,就会调用该对象
readyState 存有XMLHttprequest的状态,值是0到4之间
0 请求为初始化
1 服务器连接已建立
2 请求已接收
3 请求处理中
4 请求已完成,且响应已就绪
status 当服务器响应了任何请求就会返回一条状态码
200 服务器响应了请求,一切正常
304 没有变化
404 页面未找到
500 服务器内部错误
当条件都满足之后则可以将 responseText方法返回的数据添加到页面上,xml格式可以使用responseXML方法。
好了以上就是ajax的一个简单的页面