首页 > Web开发 > 详细

Ajax技术

时间:2018-04-13 23:20:57      阅读:258      评论:0      收藏:0      [点我收藏+]

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

Ajax技术

原文:https://www.cnblogs.com/tanhuidong/p/8824275.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!