Web Ajax入门一讲

技术交流,DH讲解.

今天讲得东西都是些很简单的,老鸟直接飞过吧.
AJAX请求靠的是XMLHttpRequest对象来实现.现在的问题就是IE和W3C标准不一样,所以我们在JS里面创建XMLHttpRequest的时候需要判断浏览器,当然简单的方法是这样的:

var request = false;
try {
  request = new XMLHttpRequest();
} catch (trymicrosoft) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
      request = false;
    }
  }
}
if (!request)
  alert("Error initializing XMLHttpRequest!");

当然IE中XMLHTTP的版本不止我上面写的这2个,貌似有5个,大家可以写出一个数组,然后循环创建ActiveX.
XMLHttpRequest对象创建好了我们就来使用它提供的方法,具体有多少方法和属性,可以详见MSDN以及其他一些网站.

XMLHttpRequest 对象的 open() 方法来完成。该方法有五个参数：

• request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。
• url：要连接的 URL。
• asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。
• username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。
• password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。

通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为 “true”。这是默认值，但坚持明确指定请求是异步的还是同步的更容易理解。
下面来个例子,同步GET请求163的首页源代码:

     var url = "http://www.163.com";
     request.open("GET", url, false);
     request.send(null);

说了同步,肯定有朋友想知道异步怎么实现?好的来个例子:

     var url = "http://www.163.com";
     request.open("GET", url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }
   function updatePage() {
     alert("Server is done!");
   }

如果朋友你去实验了下,你会发现这个对话框弹出来了很多次,为什么么?那是因为我们还有一个地方没有说:

HTTP 就绪状态表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在 Ajax 应用程序中需要了解五种就绪状态：

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

所以我们应该在updatePage函数中判断一下请求状态是不是4吧.

   function updatePage() {
     if (request.readyState == 4)
       alert("Server is done!");
   }

这里还要说一个HTTP状态码,比如说网页找到了就是200,网页错误就是404等等,我们这里是不是也要看看是不是真的打开了网页的首页吧,所以再改:

   function updatePage() {
     if (request.readyState == 4)
       if (request.status == 200)
         alert(request.responseText);
       else if (request.status == 404)
         alert("Request URL does not exist");
       else
         alert("Error: status code is " + request.status);
   }

这样如果打开成功,就会弹出网页首页的HTML代码.
最后我得说一下请求的方式除了GET还有POST,HEAD,PUT等,具体有什么区别,朋友你可以自己查资料看看,这样有利于你的学习.
下面是从MSDN抠出来的XMLHttpRequest的属性和方法:

onreadystatechange
Sets or retrieves the event handler for asynchronous requests.

readyState
Retrieves the current state of the request operation.

responseBody
Retrieves the response body as an array of unsigned bytes.

responseText
Retrieves the response body as a string.

responseXML
Retrieves the response body as an XML Document Object Model (DOM) object.

status
Retrieves the HTTP status code of the request.

statusText
Retrieves the friendly HTTP status of the request.

abort
Cancels the current HTTP request.

getAllResponseHeaders
Returns the complete list of response headers.

getResponseHeader
Returns the specified response header.

open
Assigns method, destination URL, and other optional attributes of a pending request.

send
Sends an HTTP request to the server and receives a response.

setRequestHeader
Adds custom HTTP headers to the request.

希望给新手们一点儿帮助,因为我也是新手,好的 我是DH.