Ajax教程
Ajax笔记
目录
一、Ajax简介 (2)
1.Ajax (2)
2.AJAX 基于Web 标准 (2)
3.AJAX 使用Http 请求 (2)
4.XMLHttpRequest 对象 (2)
二、Ajax浏览器支持 (3)
三、XMLHttpRequest对象 (5)
1.onreadystatechange 属性 (5)
2.readyState 属性 (5)
3.status属性 (6)
4.responseText 属性 (7)
三、AJAX - 向服务器发送一个请求 (8)
1.XMLHttpRequest.open() (8)
2.XMLHttpRequest.send() (8)
四、Ajax实例 (9)
1.练习一 (9)
一、Ajax简介
1.Ajax
AJAX = 异步JavaScript 及XML（Asynchronous JavaScript and XML）
AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web 应用程序的技术。
通过AJAX，您的JavaScript 可使用JavaScript 的XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的JavaScript 可在不重载页面的情况与Web 服务器交换数据。
AJAX 在浏览器与Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
AJAX 可使因特网应用程序更小、更快，更友好。
AJAX 是一种独立于Web 服务器软件的浏览器技术。
2.AJAX 基于Web 标准
AJAX 基于下列Web 标准：
?JavaScript
?XML
?HTML
?CSS
3.AJAX 使用Http 请求
在传统的JavaScript 编程中，假如您希望从服务器上的文件或数据库中得到任何的信息，或者向服务器发送信息的话，就必须利用一个HTML 表单向服务器GET 或POST 数据。而用户则需要单击“提交”按钮来发送/获取信息，等待服务器的响应，然后一张新的页面会加载结果。
由于每当用户提交输入后服务器都会返回一张新的页面，传统的web 应用程序变得运行缓慢，且越来越不友好。
通过利用AJAX，您的JavaScript 会通过JavaScript 的XMLHttpRequest对象，直接与服务器来通信。
通过使用HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面。用户可以停留在同一个页面，他或她不会注意到脚本在后台请求过页面，或向服务器发送过数据。
4.XMLHttpRequest 对象
通过使用XMLHttpRequest 对象，web 开发者可以做到在页面已加载后从服务器更新页面！
在2005 年AJAX 被Google 推广开来（Google Suggest）。
Google 建议使用XMLHttpRequest 对象来创建一种动态性极强的web 界面：当您开始在Google 的搜索框中输入查询时，JavaScript 会向某个服务器发出这些字词，然后服务器会返回一系列的搜索建议。
二、Ajax浏览器支持
不同的浏览器创建XMLHttpRequest 对象的方法是有差异的。
IE 浏览器使用ActiveXObject，而其他的浏览器使用名为XMLHttpRequest的JavaScript 内建对象。
2. onreadystatechange也需要不同浏览器的支持
它并不按常规的语法（在onreadystatechange事件中）来实现同步，而在在调用完send方法后，就可以直接用xmlHttpRequest.responseText获取数据。
在ajax的XMLHttpRequest.onreadystatechange方法的差异：
在Firefox中当状态为1（即XMLHttpRequest已经调用open但还没有调用send时），Firefox则会继续执行onreadystatechange后面的代码，到执行完后面的代码后，在执行onreadystatechange在状态2，3，4的代码，而IE会等待状态2的到了，执行完onreadystatechange中状态2，3，4的代码后，继续执行后面的代码，这样问题就出现了，经常我们在onreadystatechange的代码要处理从服务器上获得的数据（这个数据只有在onreadystatechange的状态为4时，才可以得到），所以这在IE中不存在问题，因为它会等待
onreadystatechange状态4到来以后，在执行onreadystatechange后面的数据，但是由于Firefox不会等到onreadystatechange状态4到来后在执行onreadystatechange后面的代码，所以后面的代码就不能处理从服务器上获得的数据。
3.判断是什么浏览器
function getOs()
{
var OsObject = "";
if(https://www.wendangku.net/doc/f92162149.html,erAgent.indexOf("MSIE")>0) {
return "MSIE"; //IE浏览器
}
if(isFirefox=https://www.wendangku.net/doc/f92162149.html,erAgent.indexOf("Firefox")>0){
return "Firefox"; //Firefox浏览器
}
if(isSafari=https://www.wendangku.net/doc/f92162149.html,erAgent.indexOf("Safari")>0) {
return "Safari"; //Safan浏览器
}
if(isCamino=https://www.wendangku.net/doc/f92162149.html,erAgent.indexOf("Camino")>0){
return "Camino"; //Camino浏览器
}
if(isMozilla=https://www.wendangku.net/doc/f92162149.html,erAgent.indexOf("Gecko/")>0){
return "Gecko"; //Gecko浏览器
}
}
其实在实际也没必要这样判断，因为不同浏览器之间只是他们的内核不同而已，而现在主要的有两种内核，一种是IE内核，另一种是Firefox内核；比如：Safan，Camino他们的内核和Firefox内核是一样的；360浏览器就是基于IE内核的。所以在判断是只要判断是否是ie就行了，其他都做一样的处理。
三、XMLHttpRequest对象
1.onreadystatechange 属性
onreadystatechange 属性存有处理服务器响应的函数。
xmlHttp.onreadystatechange=function()
{
// 我们需要在这里写一些代码
}
2.readyState 属性
readyState 属性存有服务器响应的状态信息。每当readyState 改变时，onreadystatechange 函数就会被执行。
我们要向这个onreadystatechange 函数添加一条If 语句，来测试我们的响应是否已完成（意味着可获得数据）：
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)//表示请求完成
{
// 从服务器的response获得数据
}
}
3.status属性
Number Description
100 Continue
101 Switching protocols
200 OK （发送成功）
201 Created
202 Accepted （公认的）
203 Non-Authoritative Information 204 No Content
205 Reset Content
206 Partial Content
300 Multiple Choices（权限）301 Moved Permanently
302 Found
303 See Other
304 Not Modified
305 Use Proxy
307 Temporary Redirect
400 Bad Request （重定向）401 Unauthorized
402 Payment Required
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
409 Conflict
410 Gone
411 Length Required
412 Precondition Failed
413 Request Entity Too Large
414 Request-URI Too Long
415 Unsupported Media Type
416 Requested Range Not Suitable
417 Expectation Failed
500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported
if(xmlHttp.readyState==4)//表示请求完成
{
// 从服务器的response获得数据
If(xmlHttp.status==200)
{
//可要可不要，等于200表示发送成功
}
}
4.responseText 属性
可以通过responseText 属性来取回由服务器返回的数据。
在我们的代码中，我们将把时间文本框的值设置为等于responseText：xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
四、AJAX向服务器发送一个请求
要想把请求发送到服务器，我们就需要使用open() 方法和send() 方法。
1.XMLHttpRequest.open()
初始化HTTP 请求参数
语法
open(method, url, async, username, password)
method 参数是用于请求的HTTP 方法。值包括GET、POST 和HEAD。
url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个URL 与包含脚本的文本具有相同的主机名和端口。
async 参数指示请求使用应该异步地执行。如果这个参数是false，请求是同步的，后续对send() 的调用将阻塞，直到响应完全接收。如果这个参数是true 或省略，请求是异步的，且通常需要一个onreadystatechange 事件句柄。
username 和password 参数是可选的，为url 所需的授权提供认证资格。如果指定了，它们会覆盖url 自己指定的任何资格。
2.XMLHttpRequest.send()
发送一个HTTP 请求
语法
send(body)
如果通过调用open() 指定的HTTP 方法是POST 或PUT，body 参数指定了请求体，作为一个字符串或者Document 对象。如果请求体不适必须的话，这个参数就为null。对于任何其他方法，这个参数是不可用的，应该为null（有些实现不允许省略该参数）。
说明
这个方法导致一个HTTP 请求发送。如果之前没有调用open()，或者更具体地说，如果readyState 不是1，send() 抛出一个异常。否则，它发送一个HTTP 请求，该请求由以下几部分组成：
?之前调用open() 时指定的HTTP 方法、URL 以及认证资格（如果有的话）。
?之前调用setRequestHeader() 时指定的请求头部（如果有的话）。
?传递给这个方法的body参数。
一旦请求发布了，send() 把readyState 设置为2，并触发onreadystatechange 事件句柄。
如果之前调用的open() 参数async 为false，这个方法会阻塞并不会返回，直到readyState 为4 并且服务器的响应被完全接收。否则，如果async 参数为true，或者这个参数省略了，send() 立即返回，并且正如后面所介绍的，服务器响应将在一个后台线程中处理。
如果服务器响应带有一个HTTP 重定向，send() 方法或后台线程自动遵从重定向。当所有的HTTP 响应头部已经接收，send() 或后台线程把readyState 设置为3 并触发onreadystatechange 事件句柄。如果响应较长，send() 或后台线程可能在状态3 中触发onreadystatechange 事件句柄：这可以作为一个下载进度指示器。最后，当响应完成，send() 或后台线程把readyState 设置为4，并最后一次触发事件句柄。
例：如果我们假设HTML 文件和动态文件（https://www.wendangku.net/doc/f92162149.html,，PHP等）文件位于相同的目录，那么代码是这样的：xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);//null表示清空
注：xmlhttp.open("POST", "AJAX1.ashx?&id=2&Chana=" + encodeURI("中国"), false);
//向AJAX1.ashx请求还可以在他后面加参数；
//注意的是：如果参数是中文要用encodeURL括起来，不然会出乱码。
//XMLHTTP默认不是同步请求的，也就是open方法并不像webclick的DownloadString那样把服务器返回的数据拿到才返回，是异步的，因此需要监听onreadystatechange事件。
四、Ajax实例
1.练习一
客户端：