ajax基础读书笔记 第一章

1、XMLHttpRequest对象的创建

 

   由于  不是w3c标准，所以使用Javascript创建之的方法也不同！Internet explorer 把XMLHttpRequest实例化为  ActiveX控件，然而 其他的浏览器（FireFox，opera）把XMLHttpRequest实例化为本地的JavaScript一个对象

所以 只要确定是否  支持 ActiveX控件对象！！如果支持则创建ActiveX控件！  如果不支持，则创建  本地的Javascript对象

 

下面一个代码：

   var   xmlHttp；

function  createXMLHttpRequest（）

{

 

if(window.ActiveXObject)            //则使用的是Internet explorer 浏览器

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

else if (window.XMLHttpRequest)

         xmlHttp=new XMLHttpRequest();

 

}

2  XMLHttpRequest 对象的方法

 

 

一：open(String method ,String URL,boolean )

 

method 是表示  提交数据的方法：get  post  put

URL是提交的网址

下面的Boolean  是否设置为异步，一般  设置为true 因为这正是 Ajax的特长  

如果这个参数设置为false  那处理的请求会一直等待，知道远程的服务器返回响应！！

 

二;  send (content)

  向服务器发送请求。如果被声明为 异步的 。那他会立即返回！否则知道 服务器  返回响应

 参数可选为  DOM的实例对象  字符串  流

 

三：

 

setRequestHeader（String   Header，String Value）

 

设置http请求

四;

 

abort()终止请求

 

 

五:

 

getAllResponseHeaders()

返回所有响应的首部

 

getAllResponseHeader(String name)

 

另外还有些属性

 

onreadystatechange
 每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数（可以自定义）
 
readyState
 请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
 
responseText
 服务器的响应，表示为一个串
 
responseXML
 服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
 
status
 服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）
 
statusText
 HTTP状态码的相应文本（OK或Not Found（未找到）等等）

 

 

 

下面是个交互实例

：

不同于标准Web客户中所用的标准请求/响应方法，Ajax应用的做法稍有差别。

 

1. 一个客户端事件触发一个Ajax事件。从简单的onchange事件到某个特定的用户动作，很多这样的事件都可以触发Ajax事件。可以有如下的代码：
<input type="text"d="email" name="email" onblur="validateEmail()";>

 

2. 创建XMLHttpRequest对象的一个实例。使用open()方法建立调用，并设置URL以及所希望的HTTP方法（通常是GET或POST）。请求实际上通过一个send()方法调用触发。可能的代码如下所示：
var xmlHttp;

function validateEmail()

 {

   var email = document.getElementById("email");

   var url = "validate?email=" + escape(email.value);

   if (window.ActiveXObject)

{

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

   }

   else if (window.XMLHttpRequest)

{

     xmlHttp = new XMLHttpRequest();

  

}

xmlHttp.open("GET", url);

xmlHttp.onreadystatechange = callback;

xmlHttp.send(null);

}

3. 向服务器做出请求。可能调用servlet、CGI脚本，或者任何服务器端技术。
4. 服务器可以做你想做的事情，包括访问数据库，甚至访问另一个系统。
5. 请求返回到浏览器。Content-Type设置为text/xml——XMLHttpRequest对象只能处理text/html类型的结果。在另外一些更复杂示例中，响应可能涉及更广，还包括JavaScript、DOM管理以及其他相关的技术。需要说明，你还需要设置另外一些首部，使浏览器不会在本地缓存结果。为此可以使用下面的代码：
response.setHeader("Cache-Control", "no-cache");

response.setHeader("Pragma", "no-cache");[1]

6. 在这个示例中，XMLHttpRequest对象配置为处理返回时要调用callback()函数。这个函数会检查XMLHttpRequest对象的readyState属性，然后查看服务器返回的状态码。如果一切正常，callback()函数就会在客户端上做些有意思的工作。以下就是一个典型的回调方法：
function callback()

{

   if (xmlHttp.readyState == 4)

 {

     if (xmlHttp.status == 200)

 {

          //do something interesting here

     }

   }

}

可以看到，这与正常的请求/响应模式有所不同，但对Web开发人员来说，并不是完全陌生的。显然，在创建和建立XMLHttpRequest对象时还可以做些事情，另外当“回调”函数完成了状态检查之后也可以有所作为。一般地，你会把这些标准调用包装在一个库中，以便在整个应用中使用，或者可以使用Web上提供的库。这个领域还很新，但是在开源社区中已经如火如荼地展开了大量的工作。

 

 

 

使用XMLHttpRequest对象发送请求的基本步骤如下：

1. 为得到XMLHttpRequest对象实例的一个引用，可以创建一个新的实例，也可以访问包含有XMLHttpRequest实例的一个变量。

2. 告诉XMLHttpRequest对象，哪个函数会处理XMLHttpRequest对象状态的改变，为此要把对象的onreadystatechange属性设置为指向JavaScript函数的指针。

3. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个参数：一个是指示所用方法（通常是GET或POST）的串；一个是表示目标资源URL的串；一个是Boolean值，指示请求是否是异步的。

4. 将请求发送给服务器。XMLHttpRequest对象的send()方法把请求发送到指定的目标资源。send()方法接受一个参数，通常是一个串或一个DOM对象。这个参数作为请求体的一部分发送到目标URL。当向send()方法提供参数时，要确保open()中指定的方法是POST。如果没有数据作为请求体的一部分被发送，则使用null。

这些步骤很直观：你需要XMLHttpRequest对象的一个实例，要告诉它如果状态有变化该怎么做，还要告诉它向哪里发送请求以及如何发送请求，最后还需要指导XMLHttpRequest发送请求。不过，除非你对C或C++很了解，否则可能不明白函数指针（function pointer）是什么意思。

函数指针与任何其他变量类似，只不过它指向的不是像串、数字、甚至对象实例之类的数据，而是指向一个函数。在JavaScript中，所有函数在内存中都编有地址，可以使用函数名引用。这就提供了很大的灵活性，可以把函数指针作为参数传递给其他函数，或者在一个对象的属性中存储函数指针。

对于XMLHttpRequest对象，onreadystatechange属性存储了回调函数的指针。当XMLHttpRequest对象的内部状态发生变化时，就会调用这个回调函数。当进行了异步调用，请求就会发出，脚本立即继续处理（在脚本继续工作之前，不必等待请求结束）。一旦发出了请求，对象的readyState属性会经过几个变化。尽管针对任何状态都可以做一些处理，不过你最感兴趣的状态可能是服务器响应结束时的状态。通过设置回调函数，就可以有效地告诉XMLHttpRequest对象：“只要响应到来，就调用这个函数来处理响应。”

 

 简单请求的示例

第一个示例很简单。这是一个很小的HTML页面，只有一个按钮。点击这个按钮会初始化一个发至服务器的异步请求。服务器将发回一个简单的静态文本文件作为响应。在处理这个响应时，会在一个警告窗口中显示该静态文本文件的内容。代码清单2-4显示了这个HTML页面和相关的JavaScript。

代码清单2-4　simpleRequest.html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Simple XMLHttpRequest</title>

<script type="text/javascript">

var xmlHttp;

 

function createXMLHttpRequest()

{

    if (window.ActiveXObject)

{

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

    }

    else if (window.XMLHttpRequest)

{

        xmlHttp = new XMLHttpRequest();

    }

}

 

function startRequest()

{

    createXMLHttpRequest();

    xmlHttp.onreadystatechange = handleStateChange;

    xmlHttp.open("GET", "simpleResponse.xml", true);

    xmlHttp.send(null);

}

 

function handleStateChange() {

    if(xmlHttp.readyState == 4) {

        if(xmlHttp.status == 200) {

            alert("The server replied with: " + xmlHttp.responseText);

        }

    }

}

</script>

</head>

 

<body>

    <form action="#">

        <input type="button" value="Start Basic Asynchronous Request"

                onclick="startRequest();"/>

    </form>

</body>

</html>

 

服务器的响应文件simpleResponse.xml只有一行文本。点击HTML页面上的按钮会生成一个警告框，其中显示simpleResponse.xml文件的内容。在图2-4中可以看到分别在Internet Explorer和Firefox中显示的包含服务器响应的相同警告框。

对服务器的请求是异步发送的，因此浏览器可以继续响应用户输入，同时在后台等待服务器的响应。如果选择同步操作，而且倘若服务器的响应要花几秒才能到达，浏览器就会表现得很迟钝，在等待期间不能响应用户的输入。这样一来，浏览器好像被冻住一样，无法响应用户输入，而异步做法可以避免这种情况，从而让最终用户有更好的体验。尽管这种改善很细微，但确实很有意义。这样用户就能继续工作，而且服务器会在后台处理先前的请求。