Ajax各种请求方式总结

目录

Ajax简介

Ajax应用场景分析

Ajax优势与劣势

Ajax的实现

1.Ajax的基本步骤

2.Ajax代码分析（GET方式）

3.Ajax代码分析（POST方式）

4.GET和POST的区别

 Ajax的请求方式（四种）

1.$.ajax()

2.$.get()

3.$.post()

4.$.getJSON()

---

Ajax简介

Ajax(Asynchronous JavaScript And XML)：异步的JavaScript和XML。是一种客户端技术，也是一种客户端与服务端进行异步通讯的规范。

Ajax应用场景分析

• 百度搜索（数据异步刷新）
• 百度地图（地图数据异步刷新）
• 电商系统（价格的动态更新）
• 股票信息（股价折线图）

Ajax优势与劣势

优势：异步，局部刷新，用户体验较好

劣势：不能跨域。只能在当前页面访问异步刷新当前页面的数据，不能在当前页面刷新另一个页面的数据

Ajax的实现

1.Ajax的基本步骤

1. 创建xhr对象（此对象的创建要基于一个dom事件，例如按钮的点击事件）
2. 设置状态监听（坚挺通讯状态，响应状态）
3. 打开连接（设置请求方式，请求url，同步还是异步）
4. 发送请求（get或post）

2.Ajax代码分析（GET方式）

• 创建xhr对象

var xhr=new XmlHttpRequest();

• 设置状态监听

xhr.onreadystatechange=function(){
   if(xhr.readyState==4&&xhr.status==200){
      console.log(xhr.responseText);
   }
}

• 打开连接

var url=""; 
xhr.open("GET",url,true);

• 发送请求

xhr.send(null);

3.Ajax代码分析（POST方式）

//post请求与get请求主要是在3,4步骤中.
var url="doFindPageObjects.do"
xhr.open("POST",url,true);
//post请求必须设置此请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("pageCurrent=1");//post请求此位置传数据

4.GET和POST的区别

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

然而，在以下情况中，请使用 POST 请求：

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

 

 Ajax的请求方式（四种）

1.$.ajax()

//返回其创建的XMLHttpRequest对象。	
$.ajax({
	//type表示请求的类型:get(默认),post等
	type : "post",
	//dataType表示返回的数据类型,要符合MIME(Multipurpose Internet Mail Extensions,多用途互联网邮件扩展类型)的信息类型,比如html返回text/html,xml返回text/xml。
	dataType : "html",
	//请求是否异步，默认为异步
	async:true,
	//url表示发送到后台服务器的请求路径
	url : '请求地址',
	//data表示需要发送哪些参数到后台
	data : {id:1,username:$("#name").val()},
	//success表示请求成功时执行该回调函数
	success : function(data) {
		if (data != "") {
			console.log(data);
		}
	} 
})

2.$.get()

//通过远程Http Get请求载入信息
$.get("请求地址",{id:1;name:"一一"},function(data) {
	//请求成功执行的代码写在这里
})
//或者直接拼接参数
$.get("请求地址?id="+id+"&name="+name,function(data) {
	//请求成功执行的代码写在这里
})

3.$.post()

//通过远程 HTTP POST 请求载入信息
$.post("请求地址",{id:1;name:"一一"},function(data) {
	//请求成功执行的代码写在这里
})
 

4.$.getJSON()

//$.getJSON( )方法函数主要用来从服务器加载json编码的数据，它使用的是GET HTTP请求
$.getJSON("请求地址",{参数列表},function(data){
    //......
});