JavaScript 之 AJAX 请求

一、Ajax 简介

　　1、概述

　　　　AJAX 即 “Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 

　　　　Ajax 是一种浏览器通过 JavaScript 异步发起请求，在与服务器交换数据并更新部分网页的，即在不重新加载整个页面的情况下，局部更新页面的技术。

　　2、特点

　　　　（1）Ajax 请求的局部更新，浏览器地址栏不会发生变化；

　　　　（2）局部更新不会舍弃原来页面的内容；

二、Ajax XHR

　　1、XHR 创建对象：XMLHttpRequest 是 Ajax 的基础。

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

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

var xhr = new XMLHttpRequest();

　　　　老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xhr2 = new ActiveXObject("Microsoft.XMLHTTP");

　　　　 兼容性处理：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

　　2、XHR 请求：XMLHttpRequest 对象用于和服务器交换数据

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

open(method,url,async) :  规定请求的类型，URL 以及是否异步处理请求

• • • • • •  method :请求的类型，GET 或 POST
          •  url：文件在服务器上的位置；
          •  async：true（异步）或 false（同步）

send(String):                     将请求发送到服务器，String：仅用于 POST 请求

　　　　（1）请求使用 GET 还是 POST？

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

　　　　　　　　然而，在下面几种情况下，使用 POST 请求：

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

　　　　（2）使用 POST 方式，发送 表单数据

　　　　　　  使用 POST 发送表单数据，使用 setRequestHeader() 来添加 HTTP 头，然后在 send() 方法中规定发送的数据

　　　　　　   方法：

setRequestHeader(header,value)         向请求添加 HTTP 头，header： 规定头的名称；value：规定头的值

　　　　　　  Demo：

xmlhttp.open("POST","ajax_test.do",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

　　3、XHR 响应：服务器响应

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

　　　　属性：

responseText         获取字符串像是的响应数据

responseXML        获取 XML 形式的响应数据

　　4、XHR - onreadystatechange 事件

　　　　XMLHttpRequest 对象的三个重要的属性：

onreadystatechange                存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数

status：　　　　　　　　　　200：“OK”；404：未找到页面

readyState　　　　　　　　　存有 XMLHttpRequest 的状态，从0到4发送变化：

• • • • • • •   0：请求未初始化；
            •   1：服务器连接已建立；
            •   2：请求已接收；
            •   3：请求处理中；
            •   4：请求已完成，且响应已就绪

　　　　当请求被发送到服务器时，需要执行一些基于响应的任务，每当 readyState 改变时，就会触发 onreadystatechange 事件。

　　　　readyState 属性存有 XMLHttpRequest 的状态信息。

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

三、案例

script type="text/javascript">
        // 使用 javaScript 语言发起 Ajax 请求， 访问服务器 AjaxServlet 中 javaScriptAjax
        function ajaxRequest() {
            // 1、 我们首先要创建 XMLHttpRequest
            var xmlhttprequest = new XMLHttpRequest();
            // 2、 调用 open 方法设置请求参数
            xmlhttprequest.open("GET","http://localhost:8080/book/ajaxServlet?action=javaScriptAjax",true)
            // 3、 在 send 方法前绑定 onreadystatechange 事件， 处理请求完成后的操作。
            xmlhttprequest.onreadystatechange = function(){
                if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
                    var jsonObj = JSON.parse(xmlhttprequest.responseText);
                    // 把响应的数据显示在页面上
                    document.getElementById("div01").innerHTML = "编号： " + jsonObj.id + " , 姓名： " + jsonObj.name;
                }
            }
            // 4、 调用 send 方法发送请求
            xmlhttprequest.send();
        }

    </script>