文章目录

• 一、简介
• 二、语法
• • 1、ajax使用标准语法（需要用再用）
  • • 1.1 请求对象
    • 1.2 XMLHttpRequest
    • 1.3 示例代码
    • • （1）使用AJAX发送GET请求
      • （2）使用AJAX发送POST请求
  • 2、ajax使用jQuery语法★★★★★（重点使用）
  • • 2.1 $.ajax()方式
    • 2.2 简化方式
    • • （1）$.get(url,[data],[success:fn],"dataType")
      • （2）$.post(url,[data],[success:fn],"dataType")
      • （3）$.getJSON(url,[data],[success:fn])

一、简介

• AJAX 是 Asynchronous JavaScript And XML 的简称。直译为，异步的JS和XML。
• AJAX的实际意义是，不发生页面跳转、异步载入内容并改写页面内容的技术。
• AJAX也可以简单的理解为通过JS向服务器发送请求。
• 回调函数
• AJAX这门技术很早就被发明，但是直到2005年被谷歌的大量使用，才在市场中流行起来，可以说Google为AJAX的推广起到到推波助澜的作用。

关键作用 异步处理：

说异步之前要说一下**“同步处理”**：

• 同步处理：

1. AJAX出现之前，我们访问互联网时一般都是同步请求，也就是当我们通过一个页面向服务器发送一个请求时，在服务器响应结束之前，我们的整个页面是不能操作的，也就是直观上来看他是卡主不动的。
2. 这就带来了非常糟糕的用户体验。首先，同步请求时，用户只能等待服务器的响应，而不能做任何操作。其次，如果请求时间过长可能会给用户一个卡死的感觉。最后，同步请求的最大缺点就是即使整个页面中只有一小部分内容发生改变我们也要刷新整个页面。

• 异步处理：
  1. 而异步处理指的是我们在浏览网页的同时，通过AJAX向服务器发送请求，发送请求的过程中我们浏览网页的行为并不会收到任何影响，甚至主观上感知不到在向服务器发送请求。当服务器正常响应请求后，响应信息会直接发送到AJAX中，AJAX可以根据服务器响应的内容做一些操作。
  2. 使用AJAX的异步请求基本上完美的解决了同步请求带来的问题。首先，发送请求时不会影响到用户的正常访问。其次，即使请求时间过长，用户不会有任何感知。最后，AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新。

同步和异步处理的问题

同步处理：

1. 请求：发送二次请求时，只能等上次请求响应后，才能执行

2. 效率：就算我们需要刷新局部，也必须刷新整个页面

异步处理：

1. 请求：aJax请求不会影响其他请求

2. 效率：局部刷新

二、语法

1、ajax使用标准语法（需要用再用）

1.1 请求对象

向服务器发送请求，毫无疑问需要使用Http协议，也就是我们需要通过JS来向服务器发送一个请求报文。

这里我们来回顾一下请求报文的格式：

请求首行
请求头
空行
请求体

XMLHttpRequest对象的由来：

这是一个请求报文的格式，那我们如果手动的创建这么一个报文格式来发送给服务器想必是非常麻烦呢，于是浏览器为我们提供了一个XMLHttpRequest对象。

1.2 XMLHttpRequest

1. XMLHttpRequest对象是AJAX中非常重要的对象，所有的AJAX操作都是基于该对象的。

2. XMLHttpRequest对象用来封装请求报文，我们向服务器发送的请求信息全部都需要封装到该对象中。

3. 这里需要稍微注意一下，XMLHttpRequest对象并没有成为标准，但是现在的主流浏览器都支持该对象，而一些如IE6的老版本浏览器中的创建方式有一些区别，但是问题不大。

4. 获取XMLHttpRequest对象：

   • 由于浏览器之间的差异，不同浏览器中获取XMLHttpRequest的方式不同，但总的来说一共有三种方法

   • var xhr = new XMLHttpRequest()

     • 目前主流浏览器都支持

   • var xhr = new ActiveXObject(“Msxml2.XMLHTTP”)

     • IE6支持的方式

   • var xhr = new ActiveXObject(“Microsoft.XMLHTTP”)

     • IE5.5一下支持的方式

   • 根据三种不同的方式编写通用方法来获取XMLHttpRequest对象：

     //获取XMLHttpRequest的通用方法
     function getXMLHttpRequest(){
     	var xhr;
     	try{
     		//大部分浏览器都支持
     		xhr = new XMLHttpRequest();
     	}catch(e){
     		try{
     			//如果不支持，在这里捕获异常并且采用IE6支持的方式
     			xhr = new ActiveXObject("Msxml2.XMLHTTP");
     		}catch(e){
     			//如果还不支持，在这里捕获异常并采用IE5支持的方式
     			xhr = new ActiveXObject("Microsoft.XMLHTTP");
     		}
     	}
     	return xhr;
     }
     
     

     • XMLHttpRequest对象的方法：

       (1) open(method,url,async)

       *open()
       
       	用于设置请求的基本信息，接收三个参数。
       
       	*method
       
       		*请求的方法：get或post
       
       		*接收一个字符串
       
       	*url
       
       		*请求的地址，接收一个字符串
       
       	*Assync
       
       		*发送的请求是否为异步请求，接收一个布尔值。
       
       		*true 是异步请求
           
           	*false 不是异步请求（同步请求）
       

       (2) send(string)

       *send()
           用于将请求发送给服务器，可以接收一个参数
           *string参数
           	* 该参数只在发送post请求时需要。
           	* string参数用于设置请求体
       

       (3) setRequestHeader(header,value)

       * setRequestHeader()
       	* 用于设置请求头
       	* header参数
       		* 字符串类型，要设置的请求头的名字
       	* value参数
       		* 字符串类型，要设置的请求头的值
       

   • XMLHttpRequest对象的属性：

   (1) readyState

   描述XMLHttpRequest的状态

   一共有五种状态分别对应了五个数字：
   	* 0 ：请求尚未初始化，open()尚未被调用
   	* 1 ：服务器连接已建立，send()尚未被调用
   	* 2 ：请求已接收，服务器尚未响应
   	* 3 ：请求已处理，正在接收服务器发送的响应
   	* 4 ：请求已处理完毕，且响应已就绪。
   

   (2) status

   请求的响应码
   	* 200 响应成功
   	* 404 页面为找到
   	* 500 服务器内部错误 
   	。。。。。。
   

   (3) onreadystatechange

   • 该属性需要指向一个函数

   • 该函数会在readyState属性发生改变时被调用

   (4) responseText

   ​ 获得字符串形式的响应数据。

   (5) responseXML（用的比较少）

   ​ 获得 XML 形式的响应数据。

1.3 示例代码

（1）使用AJAX发送GET请求

//获取xhr对象
var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("get","AjaxServlet?&t="+Math.random(),true);
//发送请求
xhr.send();
//监听请求状态
xhr.onreadystatechange = function(){
//当响应完成
	if(xhr.readyState == 4){
		//且状态码为200时
		if(xhr.status == 200){
			//接收响应信息（文本形式）
			var text = xhr.responseText;
			//弹出消息
	      alert(text);
		}
	};
};

（2）使用AJAX发送POST请求

//获取xhr对象
var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("post","2.jsp",true);
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
xhr.send("hello=123456");
//监听请求状态
xhr.onreadystatechange = function(){
//当响应完成
if(xhr.readyState == 4){
	//且状态码为200时
	if(xhr.status == 200){
		//接收响应信息（文本形式）
		var text = xhr.responseText;
		//弹出消息
		alert(text);
	}
};

2、ajax使用jQuery语法★★★★★（重点使用）

2.1 $.ajax()方式

$.ajax({
	type:"请求方式",
	url:"请求路径",
	data:"请求携带参数数据",
	dataType:"服务器预期返回值类型，如：'text','json','xml','html'",
	success:function(){
		//请求成功时，被回调
	},
	error:function(){
		//请求失败时，被回调
	}
});

2.2 简化方式

（1）$.get(url,[data],[success:fn],“dataType”)

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

示例：

$.get("AjaxServlet",{"name":"zs","age":18},function(rs){
	alert("rs:"+rs);
},"json");

（2）$.post(url,[data],[success:fn],“dataType”)

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

示例：

$.post("AjaxServlet","name=John&location=Boston",function(rs){
	alert( "Data Saved: " + rs );
});

（3）$.getJSON(url,[data],[success:fn])

url:发送请求地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

示例：

$.getJSON("AjaxServlet",{"name":"zs","age":18},function(rs){
	alert("rs:"+rs);
});