使用AJAX发送网络请求

AJAX定义

AJAX：Asynchronous JavaScript and XML,即异步的js和xml。通过在后台与服务器进行少量数据交换，使网页实现异步更新。也就是可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
AJAX应用程序与浏览器和平台无关

AJAX发送网络请求的步骤

1.创建XMLHttpRequest对象

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

    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    }

在创建XMLHttpRequest对象时，大部分浏览器都支持XMLHttpRequest对象，除了IE5和IE6，使用的是ActiveXObject

2.向服务器发送请求

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

//规定请求的类型：GET或者POST;文件在服务器上的位置：url;async:true(异步)/false(同步),默认为异步(true)
xhr.open('method','url',true);
//将请求发送到服务器
xhr.send();
//xhr.send(String);String仅使用于post请求

判断请求方式：
与POST相比，GET更简单更快，并且在大部分情况下都可以使用。
在下面这几种情况下，应该使用POST请求：

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

使用GET请求:

xhr.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xhr.send();

使用POST请求

xhr.open("POST","ajax_test.html",true);
//setRequestHeader(header,value):向请求添加 HTTP 头。
//header: 规定头的名称 value: 规定头的值
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");

3.服务器响应

使用XMLHttpRequest对象的reponseText或responseXML属性.
responseText:获得字符串形式的响应数据

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

responseXML:获得XML形式的响应数据

4.onreadystatechange事件

XMLHttpRequest对象有三个重要的属性：readyState,onreadystatechange,status
当readyState改变时，就会触发onreadystatechange事件；readyState属性有XMLHttpRequest的状态信息。
readyState从0-4发生变化:(共5次)
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status:200–“OK”,404–“未找到页面”
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

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

使用 Callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数。
如果网站上存在多个 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;
    }
  });
}