Ajax的介绍及应用,XMLHttpRequest对象

AJAX介绍

AJAX全称 Asynchronous JavaScript and XML : “异步的 JavaScript 和 XML”
JS是同步执行的，从上往下依次执行，如果遇到请求将会等待服务器的响应。
AJAX是用来"异步"和服务器交互的。
AJAX不重新加载整个页面,是只更新部分网页的技术

节省流量 提高性能 更好的用户体验
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页
在 2005 年以后AJAX开始流行，现在已经非常成熟稳定，各个前端工程师必备技能。

使用场景

在搜索框输入关键字时，JS 会把关键字发送到服务器 返回一个搜索建议列表. 比如:
点赞、评论功能等等，现在只要与服务器交互一般都使用Ajax

AJAX-XMLHttpRequest对象

1、XMLHttpRequest

1、简介
XMLHttpRequest 是 AJAX 的核心。
所有现代浏览器均支持 XMLHttpRequest对象 IE6之前使用的是 ActiveXObject对象
XMLHttpRequest 用于和服务器交互。请求和接受数据。

XMLHttpRequest 对象是开发者的梦想，因为能够：

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

2、创建 XMLHttpRequest 对象

xhr = new XMLHttpRequest ( ) ;

IE6 之前使用下面方式创建 :

xhr = new ActiveXObject ( "Microsoft.XMLHTTP" ) ; 

发送请求

1、向服务器发送请求
使用 XMLHttpRequest 对象的 open( ) 和 send( ) 方法向服务器发请求
xmlhttp.open ( “GET” , “test1.txt” , true )
xmlhttp.send( )

2、GET & POST
GET 更简单也更快，大部分情况下使用GET
以下情况用POST :
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的数据，POST 比 GET 更稳定也更可靠

3、GET 请求
一个简单的 GET 请求：
xmlhttp.open ( “GET”,“demo_get.asp” , true )
xmlhttp.send ( ) ;
为了避免缓存，可以给 URL 添加ID
xmlhttp.open ( “GET” , “demo_get.asp?t=” + Math.random( ) , true ) ;
xmlhttp.send ( ) ;
GET方式发送
xmlhttp.open ( “GET” , “demo_get2.asp?name=Hungey” , true )
xmlhttp.send ( )

4、POST 请求
xmlhttp.open ( “POST” , “demo_post.asp” , true )
xmlhttp.send ( )
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader ( ) 来添加 HTTP 头。然后在 send( ) 方法中规定数据
xmlhttp.open ( “POST” , “ajax_test.asp” , true);
xmlhttp.setRequestHeader( “Content-type” , “application/x-www-form-urlencoded” )
xmlhttp.send(“name=Hungry”);

5、url - 服务器上的文件
open( ) 方法的 url 参数是服务器上文件的地址
xmlhttp.open ( “GET” , “ajax_test.asp” , true )
该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）

6、异步 - True & False
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open ( ) 方法的 async 参数必须设置为 true
xmlhttp.open ( “GET” , “ajax_test.asp” , true )
AJAX 出现之前，都是同步请求，可能会引起应用程序崩溃。
通过 AJAX，JavaScript 无需等待服务器的响应
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

7、Async = true
当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange = function ( ) {
          if ( xmlhttp.readyState == 4 && xmlhttp.status==200 ) {
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText 
          }
}
xmlhttp.open ( "GET" , "test1.txt" , true ) 
xmlhttp.send ( )

8、Async = false
如需使用 async=false，将 open( ) 方法中的第三个参数改为 false
xmlhttp.open ( “GET” , “test1.txt” , false )
不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
JS 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send( ) 语句后面即可
xmlhttp.open ( “GET” , “test1.txt” , false )
xmlhttp.send ( )
document.getElementById(“myDiv”).innerHTML = xmlhttp.responseText

3、AJAX - 服务器响应

1、服务器响应
获得来自服务器的响应数据，使用 XMLHttpRequest 对象的 responseText 或 responseXML属性
responseText 获得字符串形式的响应数据
responseXML 获得 XML 形式的响应数据。

2、responseText 属性
如果来自服务器的响应并非 XML，使用 responseText 属性
responseText 属性返回字符串形式的响应，因此您可以这样使用：
document.getElementById(“myDiv”).innerHTML = xmlhttp.responseText

3、responseXML 属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性

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 

4、AJAX - onreadystatechange 事件

1、onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
XMLHttpRequest 对象有3个重要属性:

在 onreadystatechange 事件中，规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪

xmlhttp.onreadystatechange = function ( ) {
          if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
                   document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
          }
}

onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

2、使用 Callback 函数封装Ajax
如果存在多个 AJAX 任务，应该为XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction ( ) {
          loadXMLDoc( "ajax_info.txt" , function ( ) {
                    if ( xmlhttp.readyState == 4 && xmlhttp.status==200 ) {
                              document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                    }
          } ) 
}