首页 > 代码库 > ajax

ajax

http://www.cnblogs.com/Garden-blog/archive/2011/03/11/1981778.html

http://blog.csdn.net/liujiahan629629/article/details/22229669

  ajax(Asynchronous JavaScript and XML)是实现web页面实现异步刷新,避免将整个页面提交给服务器,造成的数据交互性差用户等待时间长的问题。ajax可以实现将很少的数据提交给服务器并且得到服务器的相应 返回到页面,实现页面部分刷新,达到快速更新部分页面。

  ajax是web开发必不可少的一门技术。XMLHttprequest是ajax的核心。

  用js创建XMLHttprequest对象:(由于一些浏览器的内核不同,其中的js技术版本也不同,所以创建XMLHttprequest对象的方式也不同)

  IE浏览器:

  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 或

  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

  非IE的浏览器:

  xmlHttp = new XMLHttpRequest();

  发出 Ajax 请求:

function callServer() {
  // Get the city and state from the web form
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  
// Build the URL to connect to
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

  // Open a connection to the server
//第三个参数:false:同步,代码发出请求后将等待服务器返回的响应。true:异步,服务器在后台处理请求的时候用户仍可以使用表单(甚至调用其他 JavaScript 方法)。
  xmlHttp.open("GET", url, true);

  // Setup a function for the server to run when it‘s done
  xmlHttp.onreadystatechange = updatePage;

  // Send the request
  xmlHttp.send(null);
}

  处理服务器响应

function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("zipCode").value =http://www.mamicode.com/ response;
  }
}

  启动一个 Ajax 过程

<form>
  <p>City: <input type="text" name="city" id="city" size="25" onChange="callServer();" /></p>
  <p>State: <input type="text" name="state" id="state" size="25" onChange="callServer();" /></p>
  <p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p>
</form>

以上是一个非常简单的例子:用户填入city和state,然后出发callServer()方法,发送ajax请求,然后通过updatePage监听响应,然后更新局部页面。

  web 2.0的时代:web2.0配合ajax技术,使得页面的ajax请求和响应转到后台,用户在页面几乎看不带,而且页面也不会有闪烁和异动。

  XMLHttpRequest的部分属性和方法:

    ·open():建立到服务器的新请求。
    ·send():向服务器发送请求。 (一般用url发送请求之后,就不用send发送了,这时可以传参null:例:send(null))
    ·abort():退出当前请求。
    ·readyState:提供当前 HTML 的就绪状态。
    ·responseText:服务器返回的请求响应文本。
    ·responseXML:服务器返回的请求响应XML。

    

  readyState相应的5中状态:

    ·0:请求没有发出(在调用 open() 之前)。
    ·1:请求已经建立但还没有发出(调用 send() 之前)。
    ·2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)。
    ·3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应。
    ·4:响应已完成,可以访问服务器响应并使用它

    可以根据服务器响应返回的就绪状态码设置 数据相应的进度,1=25%。。。4=100%,这样会使得界面更加的友好。

    Http的状态码(request.status):

    当ajax发送请求,也得到了相应,而且相应完成这时 HTNL的就绪状态readyState=4,但是可能在服务器响应的时候出现错误。例如:常见的404,这是访问的页面不存在,可能是由于url写错了得原因。这种状态码就是HTTP的状态码。HTTP的状态码有很多比较常见的:

    404:访问的页面不存在

    401:禁止访问

    200:正确返回,顺利访问

  open(method,url,boolean):

    open()方法的请求方式:get,post,head

  

    head请求:head请求可以用来查看内容的长度和类型

    想要获取请求内容的长度可以用:request.getResponseHearder("Content-Length");

    想要获取请求内容的类型可以用:request.getResponseHearder("Content-Type");

    用getAllRespoonseHearders()的方法可以获取返回的header(响应头)的全部内容。

 

DOM(document object model) DOM树,对象树,节点对象树

ajax