AJAX开发初探

 AJAX即“Asynchronous Javascript And Xml”（异步avascript和 XML）实现局部更新。AJAX在浏览器与Web服务器之间使用异步数据传输HTTP请求，核心对象是XmlHttpRequest。通过这个对象，javascript可以在不重载页面与Web服务器交换数据。示例在WebFrom中使用UpdatePanel和scriptManger实现局部更新。

首先，拖拽上两个控件，然后把需要局部更新的内容放到UpdatePanel控件内。

注意，ScriptManager需要放到UpdatePanel之前。如果想使页面中的某个控件变色思路是使用javascript的document.GetElementById()方法获得控件,然后修改控件的style的背景。

Varbtn=document.getElementById(“Button1”);

btn.onmouseover=function()

{

 Btn.style.background=’red’;

}

XMLHttpRequest对象

它提供了HTTP协议的完全访问，包括做出POST和HEAD请求以及普通的GET请求的能力。它可以同步或异步地返回Web服务器的响应，并且以文本或者一个DOM文档的形式返回内容。     XMLHttpRequest.open()//初始化 HTTP 请求参数

XMLHttpRequest.send()//发送一个 HTTP 请求XMLHttpRequest.setRequestHeader()//setRequestHeader()方法指定了一个 HTTP 请求的头部。

属性

readyState表示HTTP的请求状态，当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始。当这个值为 4时表示HTTP响应已经完全接收。

responseText用于接收服务器的响应。

Ajax通过XMLHttpRequest对象把需要的部分页面内容传递给服务器，服务器将它转发给处理表单的脚本，然后返回处理结果。通过javascript代码把结果显示到指定位置，从而实现局部更新。

DOM

HTML DOM Document对象

每个载入浏览器的HTML文档都可以成为Document对象。它可以使我们在脚本中对HTML页面的所有元素进行访问。最常用的是getElementById()，返回对拥有指定 id 的第一个对象的引用。

Ajax 世界中的请求/响应

首先，应该创建一个XMLHttpRequest对象，不同的浏览器创建方法不同。关于创建可以百度。

发出请求

1、从 Web 表单中获取需要的数据。

Var name=document.getElementById("Id").value

Var pass= document.getElementById("Id").value

2、建立要连接的 URL。 Varurl=”字符串”

 3、打开到服务器的连接。 

xmlHttp.open("GET", url,true);（xmlHttp是XMLHttpRequest对象）

4、设置服务器完成处理后客户端要运行的函数。 xmlHttp.onreadystatechange= updatePage;
5、发送请求。 xmlHttp.send(null);

处理服务器响应

什么也不要做，直到xmlHttp.readyState 属性的值等于 4。 
·服务器将把响应填充到xmlHttp.responseText 属性中。

 1.处理服务器响应
function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
   document.getElementById("zipCode"). innerHTML= response;
  }
}

连接 Web 表单
还有什么呢？实际上没有多少了。一个 JavaScript 方法捕捉用户输入表单的信息并将其发送到服务器，另一个 JavaScript 方法监听和处理响应，并在响应返回时设置字段的值。所有这些实际上都依赖于调用 第一个 JavaScript 方法，它启动了整个过程。

结束语

现在您可能已经准备开始编写第一个 Ajax 应用程序了，如果想得到更好的提高，请转到http://www.w3school.com.cn/ajax/index.asp