AJAX学习笔记（一）

最新推荐文章于 2025-07-21 23:03:53 发布

原创最新推荐文章于 2025-07-21 23:03:53 发布 · 491 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #服务器 #string #asynchronous #function

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

这个星期想要拿下ajax这是一些基础的笔记：

1. 创建XMLHttpRequest对象

var xmlHttp; function createXMLHttpRequest() { //判断浏览器是IE浏览器或其他 if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } }

2. XMLHttpRequest对象的典型方法

A．void abort() 停止当前请求 B．String getAllResponseHeaders() 把HTTP请求的所有响应首部作为键/值对返回 C．String getResponseHeader("header") 返回指定首部的串值 D．void open("method", "url")建立对服务器的调用。method参数可以是GET、POST或 PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数open(String method, String url，boolean asynch, String userName, String password)。其中前三个参数是必备的。第三个参数是是该方法是否为异步：当然大部分情况应该设置为true，但是有时false也是有必要的。 E．void send(content) 向服务器发送请求。 F．void setRequestHeader(String header, String value)把指定首部设置为所提供的值。在设置任何首部之前必须先调用open().

3. XMLHttpRequest对象的属性

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

4. GET与POST

      GET的应用：原则上当多个请求返回相同的结果时可以用GET，但是一般情况下服务器限制url传送资源的大小。

    POST的应用：当改变服务器上的状态时应当使用POST方法。需要设置XMLHttpRequest的headerxmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

5. 如何发送简单的请求

这里我们先看一个例子：

实例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> <mce:script type="text/javascript"></mce:script> </head> <body> <form action="#"> <input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();" /> </form> </body> </html>

simpleResponse.xml <?xml version="1.0" encoding="UTF-8"?> <xml-body> aaaaa </xml-body>

其中simpleResponse.xml模拟响应发送到服务器后，服务器作出的响应。

这是截图：效果图

现在我们可以总结一下XMLHttpRequest向服务器发送请求的步骤了：
    A. 创建XMLHttpRequest对象的实例
    B. 告诉XMLHttpRequest对象，哪个函数会处理XMLHttpRequest对象状态的改变，为此要把对象的onreadystatechange属性设置为指向JavaScript函数的
    指针。
    C. 指定请求的属性
    D. 将请求发送服务器。

请高手及时指出的错误....