html Ajax和XMLHttpRequest

2016-11-16 18:56:02来源:CSDN作者:xiejunna人点击

Ajax:Asynchronous Javascript and XML(异步的Javascript和XML),是基于Javascript和Http请求的
功能是快速创建动态网页,即在不重新载入整个页面的情况下,对网页的某部分进行更新。

Ajax的基础是XMLHttpRequest,步骤如下:
1. 首先创建一个XMLHttpRequest对象
2. 然后利用该对象向服务器发送请求”(在此时可以通过参数传递的方式向服务器端发送数据),读取服务器端的文件(xml、asp、php等)
3. 最后根据读取的文件内容来更新当前页面的部分区域的内容

1.创建一个XMLHttpRequest对象在IE中: xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")Firefox等其他浏览器中:xmlhttp = new XMLHttpRequest()
2.利用该对象向服务器发送请求"(在此时可以通过参数传递的方式向服务器端发送数据),读取服务器端的文件(xml、asp、php等)XMLHttpRequest对象有两个相关方法:1. open()用于初始化HTTP请求参数,但并不发送;语法:open(method, url, async, username, password)下面来看看每个参数代表的含义:1)method:取值可为GET、POST和HEAD。2)url:指定了请求的目标文件地址。3)async:取值为true或者false。指定了请求模式是同步(false)还是异步(true)。    当async为true时,表示为异步请求。即请求之后,不等待响应,继续执行之后的代码。此时需要规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数。    当async为false时,表示为同步请求。即请求之后,要等待完全响应才能继续执行之后的代码。(此种模式容易造成堵塞,因此推荐使用异步请求模式)2. send()用于发送HTTP请求。使用open()方法中指定的参数,向服务器发送请求。
 XMLHttpRequest对象与发送请求相关的属性:readyState、status、statueText1. readyState属性表示的是HTTP请求的状态,当一个XMLHttpRequest对象被创建时,这个属性值从0开始,直到接受到完整的HTTP响应,这个值增加到40:Uninitialized 初始化状态。XMLHttpRequest对象已被创建或已被abort()方法重置;1:Open open()方法已调用,但send()方法还没被调用,请求尚未发送2:Sent send()方法已调用,HTTP请求已发送到服务器,但还没有收到响应3:Receiving 所有响应头部已经收到。响应体开始接收但尚未完成4:Loaded HTTP响应已经完全接收。readyState属性值不会递减,除非当一个请求在处理过程中调用了open()或abort()方法。每次这个属性值增加时,都会触发onreadystatechange事件句柄。2. status属性是由服务器返回的HTTP代码状态。只能在readyState的值大于或等于3的时候读取,否则会出错。status的值为200时,表示读取成功;而404表示"Not Found"错误。3. statusText属性与status参数代表的含义相同,只是该参数使用字符串而不是数字来表示当前状态。    status为200时对应的statusText的值为"OK";    status为404时对应的statusText的值为"Not Found"
响应的内容XMLHttpRequest对象有两个属性来存储响应的内容(应该就是读取的目标文件的内容):responseText和responseXML1. responseText属性:目前为止从服务器端接收到的响应体(不包括头部),如果还没有接收到数据(例如readyState<3),则是一个空字符串。注:如果响应包含了为响应体指定编码的头部,则使用该编码。否则,使用Unicode UTF-82. responseXML属性:对请求的响应,解析为XML并作为Document对象返回。

例子如下:

<script type="text/javascript">var xmlhttp;// 函数主体function loadXMLDoc(url){  xmlhttp=null;  // 初始化XMLHttpRequest对象  if (window.XMLHttpRequest)  {    // Firefox等现代浏览器中的XMLHttpRequest对象创建    xmlhttp=new XMLHttpRequest();  }  else if (window.ActiveXObject)  {    // IE中的XMLHttpRequest对象创建    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }  // 若创建成功,则开始解析目标XML文件  if (xmlhttp!=null)  {    xmlhttp.onreadystatechange=state_Change; // 指定onreadystatechange事件句柄对应的函数    xmlhttp.open("GET",url,true); // 初始化HTTP请求参数,GET方式,异步请求    xmlhttp.send(null); // 发送请求  }  else  {    alert("Your browser does not support XMLHTTP.");  }}// readyState递增时的监测函数,当"readyState==4"且"status=200"时,执行相应操作function state_Change(){  if (xmlhttp.readyState==4) // 4 = "loaded"  {    if (xmlhttp.status==200) // 200 = "OK"    {      // responseText属性值是响应体的文本      document.getElementByIdx_x('T1').innerHTML=xmlhttp.responseText;    }    else    {      alert("Problem retrieving data:" + xmlhttp.statusText);    }  }}</script>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台