Ajax技术

Posted 2020-10-31

　　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的一个简单的页面