浅谈AJAX

1.AJAX=异步JS+XML；

2.AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。即是一种用于创建快速动态网页的技术。个人认为此效果主要靠XML实现，因为XML的其中一个用途就是将数据从HTML中分离出来，这样就可以专注的使用CSS和HTML进行网页布局和样式，当基层数据改变的时候就可以不用动HTML和CSS，然后使用JS就可以读取一个外部 XML 文件，并更新网页的数据内容。所以在AJAX里面的XML就是用来作为转换数据的格式

3.AJAX工作原理

•  XMLHTTPRequst对象用于异步的和服务器进行数据交换，它可以不在重新加载页面的情况下更新网页，在页面已加载后从服务器请求数据、接收数据和在后台向服务器发送数据。

4.论如何创建 XMLHttpRequest 对象（用于在后台与服务器交换数据）

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

创建时~

老版浏览器：var = new ActiveXObject("Microsoft.XMLHTTP");

新版浏览器：var = new XMLHttpRequest();

5.向服务器发送请求

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

基本语法（实例）：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

①open(method<请求的类型>,url<URL>,async<是否异步处理请求>)

•  method：GET 或 POST

使用post的情况：不使用缓存文件（在学习http协议的时候，我们可以看到使用GET的话类似于哔哩哔哩的收藏功能，GET可以缓存数据和文件）、向服务器发送大量数据时、发送包含未知字符的用户输入时<主要时看POST和GET的区别>

• 文件在服务器上的位置(在传回响应之前能够在服务器上执行任务)
• true（异步）或 false（同步）

②send(string)

• 仅用于 POST 请求 

③使用GET发送请求，请注意三者区分

 以上面这种方式发送请求的话可能是缓存的结果，所以我们需要在URL中添加一个唯一的ID，类似于以下：

 也可以向URL添加信息来通过GET方法发送信息：（类似于以下）

效果如下：

 ④使用POST来传送数据（类似于HTML表单），需要使用setRequestHeader() 来添加 HTTP 头然后在send（）方法中规定需要发送的数据

xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

 setRequestHeader(header,value)<header:规定头的名称，value:规定头的值>

⑤当使用Async=true时，需要规定在响应处于onreadystatechange 事件中的就绪状态时执行的函数：（实例）

xmlhttp.onreadystatechange=function()

{

         if (xmlhttp.readyState==4 && xmlhttp.status==200)

        {

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

        }

}

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);

xmlhttp.send();

（1）这里的 XMLHttpRequest 对象的 responseText（获得字符串形式的响应数据） 或 responseXML（获得XML形式的响应数据） 属性是用来获得来自服务器的响应

responseText属性使用实例：

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

 responseXML属性：如果服务器的响应是XML且要作为XML对象进行分析就需要使用这个属性

 （2）XMLHttpRequest 对象的onreadystatechange属性：

用来储存函数，每当 readyState 改变时，就会触发 onreadystatechange 事件（调用该函数）。且事件被触发 4 次。并且在onreadystatechange函数里规定当readyState==4&&status==200时所执行的函数

（3）XMLHttpRequest 对象的readyState属性：

readyState 属性存有 XMLHttpRequest 的状态信息。0：请求未初始化，1：服务器连接已经建立，2：请求已经接受，3：请求处理中，4：请求已完成并且响应已就绪

（4）XMLHttpRequest 对象的status属性.200：“OK”，400：未找到页面

6.回调函数

一种以参数形式传递给另一个函数的函数

用处：当网站上存在多个 AJAX 任务，那么就要为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。函数调用里面应该包括URL和onreadystatechange 事件时执行的任务

实例：

function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}

7.步骤解析：

• 创建 XMLHttpRequest 对象
• 当服务器响应就绪时执行函数
• 把请求发送到服务器上的文件

8.AJAX可以用来·····

创造动态性更强的应用程序、与数据库进行动态通信、与XML文件进行交互通信