AJAX基础知识

引用自 菜鸟教程
为了学习jQuery的Ajax，学习下原生js的Ajax，打一下基础。

---

1.简介

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

什么是AJAX？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

工作原理

就是浏览器创建个对象，再浏览器对服务器发送请求，服务器处理这个请求后将浏览器需要的数据返回给浏览器（或许是存到浏览器最开始创建的对象中），再浏览器使用 js
中的 DOM 方法将其添加到 HTML 中进行显示，这样就达到了在不刷新整个页面的前提下更新了页面的部分内容

AJAX 需要用到它们

• XMLHttpRequest 对象 (异步的与服务器交换数据)
• JavaScript/DOM (信息显示/交互)
• CSS (给数据定义样式)
• XML (作为转换数据的格式)

2. XHR 创建对象

XMLHttpRequest 对象

（我没有写IE5 和 IE6 的创建方法，具体方法请看菜鸟教程）

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

//variable好像就是变量的意思
variable = new XMLHttpRequest();

3. XHR 发送请求

XMLHttpRequest 对象用于和服务器交换数据。

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

//xml其实就是一个XMLHttpRequest对象，就比如上面的variable一样
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型 GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器上 string：仅用于 POST 请求

GET 还是 POST ？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

url - 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址：

该文件可以是任何类型的文件，比如 .txt 和 .xml 和 .html，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

异步 - TRUE 或 FALSE ？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

• 在等待服务器响应时执行其他脚本
• 当响应就绪后对响应进行处理

4. XHR 响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得XML形式的响应数据

（顺便说一下 HTML 和 XML 的区别）
XML 不是 HTML 的替代。

XML 和 HTML 为不同的目的而设计：

XML 被设计为传输和存储数据，其焦点是数据的内容。

HTML 被设计用来显示数据，其焦点是数据的外观。

HTML 旨在显示信息，而 XML 旨在传输信息。

responseText属性

返回数据形式为字符串

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML属性

返回数据形式为XML

//将返回的XML数据用.responseXML属性解析并存到变量xmlDoc中
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

由于只是想了解一下原生js的Ajax的基础，所以就只是写到这儿了