AJAX

1. AJAX概述

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和XML）
• 现在一般与json共同使用更多。
• AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
• 比如搜索框的下拉列表、注册时表单未提交时就会有格式判断。

2 . AJAX的原理

XMLHttpRequest 是js的对象，是AJAX的基础，用于在后台和服务器交换数据。

XMLHttpRequest的创建

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");
  }

打开与服务器的连接

open(method, url, async)：

• method：请求方式，通常为GET或POST；

• url：请求的服务器地址，例如：/ajaxdemo1/AServlet，若为GET请求，还可以在URL后追加参数，在springMVC中即为@RequestMapping后的路径

• async：这个参数可以不给，默认值为true，表示异步请求

  xmlHttp.open("GET", "/ajaxdemo1/AServlet?username=zhangsan&password=123", true);

发送请求

//get请求无参数
xmlHttp.send();

//post请求附带参数
//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

接收服务器响应

当请求发送出去后，服务器端Servlet就开始执行了，但服务器端的响应还没有接收到。接下来我们来接收服务器的响应。

onreadystatechange事件

XMLHttpRequest对象有一个onreadystatechange事件，它会XMLHttpRequest对象的状态发生变化时被调用。下面介绍一下XMLHttpRequest对象的5种状态：

• 0：创建了XMLHttpRequest对象，还未调用open()方法；
• 1：open()方法已调用，但还没调用send()方法；
• 2：send()方法已调用；
• 3：开始读取服务器响应；
• 4：读取服务器响应结束。

onreadystatechange事件会在状态为1、2、3、4时引发。但我们通常只关心最后一种状态（4），即读取服务器响应结束后，客户端才会做出改变。可以通过XMLHttpRequest对象的readyState属性来得到该对象的状态。

xmlHttp.onreadystatechange = function() {
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				alert(xmlHttp.responseText);	
			}
		};

服务器响应属性

• responseText：获得字符串形式的响应数据。

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

• responseXML：获得XML形式的响应数据。

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
{
  /**
  对应输出为
  	Harry Potter
	Everyday Italian
	Learning XML
	XQuery Kick Start
	分别为各个<title>标签中的值
	*/
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;

JQuery和AJAX

由于AJAX本身编程相对复杂，JQuery框架对其进行了简化，主要有以下几种方法：

关键字	简介
$.ajax()	提交AJAX请求
$.get()	使用get方式提交ajax
$.post	使用post方式提交ajax
load()	最简单的调用ajax的方式

$.ajax() 方法

语法：

jQuery.ajax([settings])

settings：可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值，常用参数如下：

参数名	类型	说明
url	String	请求地址，默认值为当前页
data	String	发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。必须为 Key/Value 格式。
type	String	请求方式 (“POST” 或 “GET”)， 默认为 “GET”。
success	Function	请求成功后的回调函数。
dataType	String	预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，，传递给回调函数。可用值:”xml”、”html”、”script”、”json”、”text”

$.ajax({
                url:"/testAjax",
                data:{
                    "username":"mmm",
                    "password":12345,
                    "address":"Hefei"
                },
                success:function (data) {
                    alert("AJax()方法返回的数据"+data)
                },
                type:"POST"
            })

之后的$.get()与$.post()方法就是对本方法的简化，不用在标出参数名，但调用函数时要按照一定顺序。

$.get() 方法

语法：

$.get(URL,callback);

URL：希望请求的URL，可附带请求参数

callback：回调函数(可选)

$.get(
    		"/testAjax",
            {"username":value},
    		//将id=checkResult标签的内容修改为返回数据
            function(result){
              $("#checkResult").html(result);
            }
        );

$.post() 方法

语法：

$.post(URL,data,callback);

URL：希望请求的URL

data：连同请求发送的数据(可选)

callback：回调函数(可选)

$.post(
                "/testAjax",
                {
                    username:"mhs",
                    password:123,
                    age:26
                },
                function(data) {
                    alert("jquery AJAX的Post()返回结果"+data);
                }
            )

load() 方法

从服务器加载数据，并把返回的数据放入备选元素中

语法：

$(selector).load(URL,data,callback);

URL：希望请求的URL

data：连同请求发送的数据(可选)

callback：回调函数(可选)