获取Ajax对象

  不同的浏览器对Ajax的支持是不一致的，所以我们要区别的对待。

  设置回调函数

  设置回调函数的目的就是在Ajax完成与服务器的交互之后，将获取到的数据信息，添加到页面上。

  通常我们会指定onreadystatechange函数作为我们的回调处理函数。

  相关于Ajax与服务器交互有如下状态信息供我们在编码的过程找中参考。

  .readystate

  关于加载状态有如下几个常用的数值：

  •0: 请求未初始化

  •1: 服务器连接已建立

  •2: 请求已接收

  •3: 请求处理中

  •4: 请求已完成，且响应已就绪

  .status

  加载结果的状态信息有：

  •200： “OK”

  •404： “未找到此页面”

  开启交互

  一谈起交互，映入脑海的就是双方。也就是我们的ajax客户端和服务器之间的交互。所以我们需要明确请求数据在服务器上的位置

  open(method,url,async)

  url的使用会根据method的不同而不同，这一点我们务必要清楚。至于asynchronous这个参数jquery异步加载js方法，一般来说对于数据量很小的请求可以采用false，但是建议使用true来进行异步的加载，来避免服务器压力过大。

  •GET方式

  只是用这种方式很简单，指定url在服务器上的位置即可。这里红色部分的理解相当的重要。我们务必指定url为请求在服务器上的位置，一般采用绝对路径的方式。

  <pre class="brush:php;toolbar:false">// 对Servlet来说指定其注解上的位置即可
xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true);
xmlhttp.send();</pre>

  登录后复制

  •POST方式

  使用POST方式的时候，我们需要额外的多一项处理。如下例：

  <pre class="brush:php;toolbar:false">xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 在send方法中指定要传输的参数信息即可
xmlhttp.send("fname=Bill&lname=Gates");</pre>

  登录后复制

  客户端更新页面

  对于Ajax来说，顾名思义。是采用xml形式来传输数据的。但是目前而言，这不再是唯一的一种形式了。那么我们怎么将获取到的数据更新到网页上呢？有如下两种方式。

  •如果来自服务器的响应并非 XML，请使用 responseText 属性。

  document.getElementById("myp").innerHTML=xmlhttp.responseText;

  •如果来自服务器的响应是 XMLjquery异步加载js方法，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

<p><pre class="brush:php;toolbar:false">xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i