原生JS中的Ajax请求与jQuery中的Ajax请求

目录

  • 1. `Ajax` 请求简介
  • 2. 原生 `JS` 中的 `Ajax` 请求流程
    • 2.1. 创建异步对象
    • 2.2. 调用`open()` 方法设置请求行
      • 2.2.1. `open()` 方法参数
    • 2.3. 调用 `send()` 方法发送数据
    • 2.4. 设置回调函数
    • 2.5. 完整的请求案例
      • 2.5.1. `ajax-get` 方式请求案例
      • 2.5.2. `ajax-post` 方式请求案例
      • 2.5.3. `Ajax` 中的 `readyState` 属性
      • 2.5.4. `Ajax` 中的状态码 `status` 属性
  • 3. `jQuery` 中的 `Ajax` 请求
    • 3.1. `$.get()` 请求
      • 3.1.1. 常用示例
    • 3.2. `$.post()` 请求
      • 3.2.1. 常用示例
    • 3.3. `$.ajax()` 请求

1. Ajax 请求简介

ajaxAsynchronous JavaScript and XML):是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新。这就意味着可以在 不重新加载整个网页的情况下,对网页的局部进行更新

2. 原生 JS 中的 Ajax 请求流程

2.1. 创建异步对象

var xhr = new XMLHttpRequest();

2.2. 调用open() 方法设置请求行

设置请求行 open,也就是设置请求方式及请求 URL

// get 请求如果有参数,就需要在 url 后面拼接参数
xhr.open('GET', "xxxxxx?username="+name);

// post 如果有参数,就在请求体中传递
xhr.open('POST', URL);
// post 方式发送数据,需要设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

2.2.1. open() 方法参数

语法:open(method, url, async),方法有 3 个参数

  • method 请求类型:对应的取值是 GETPOST
  • url:文件在服务器上的位置即接口路径
  • async:默认值 true 异步,false 为同步
    • asynctrue 时,服务器的请求是异步的,也就是脚本执行 send() 方法后不等待服务器的执行结果,继续执行脚本代码
    • asyncfalse 时,服务器的请求是同步的, 也就是脚本执行 send() 方法后等待服务器的执行结果,若在等待过程中超时,则不再等待,继续执行后面的脚本代码

2.3. 调用 send() 方法发送数据

// get的参数在 url 拼接了,所以不需要在这个函数中设置
xhr.send(null);
 
// post 必须有参数
xhr.send('a=100&b=200&c=300');
  • send(string):请求发送到服务器,仅用于 POST 请求

2.4. 设置回调函数

xhr.onreadystatechange = callback;

2.5. 完整的请求案例

2.5.1. ajax-get 方式请求案例

var xhr = new XMLHttpRequest();
xhr.open("get","xxxxxx?username="+name);
xhr.send(null);

// 回调函数
xhr.onreadystatechange = function() {
	if(xhr.status == 200 && xhr.readyState == 4){ 
   	 	console.log(xhr.responseText);
    	document.querySelector(".showmsg").innerHTML = xhr.responseText;;
 	}
}

2.5.2. ajax-post 方式请求案例

var xhr = new XMLHttpRequest();
xhr.open("post","xxxxxx");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("username="+name);

// 回调函数
xhr.onreadystatechange = function() {
	// 判断服务器是否响应,判断异步对象的响应状态
	if(xhr.status == 200 && xhr.readyState == 4){
 		document.querySelector(".showmsg").innerHTML = xhr.responseText;
	}
}

2.5.3. Ajax 中的 readyState 属性

  • 0:未初始化,尚未调用 open() 方法
  • 1:启动,已经调用 open() 方法,但尚未调用 send() 方法
  • 2:发送,已经调用 send() 方法,但尚未接收到响应
  • 3:接收,已经接收到部分响应数据
  • 4:完成,已经接收到全部响应数据,而且已经可以在客户端使用了

2.5.4. Ajax 中的状态码 status 属性

  • 200-300:表示响应成功
  • 400:请求参数错误
  • 401:无权限访问
  • 404:访问的资源不存在

3. jQuery 中的 Ajax 请求

3.1. $.get() 请求

$.get() 是以 GET 方式实现 Ajax 请求的,在提交短数据(数据量不能太多,最大 4KB)时可用

$.get(
    url,          // 必需:将请求发送到哪里的URL链接
    data,         // 可选:连同请求发送到服务器的数据【俗称:参数】
    success(      // 可选:当请求成功时运行的函数
        response, // 包含来自请求的结果数据
        status,   // 包含请求的状态
        xhr       // 包含 XMLHttpRequest 对象
    ),
    dataType      // 可选:预计的服务器响应的数据类型
                  // 默认jQuery 将智能判断。可能的类型有:"xml"、"html"、"text"、"script"、"json"和"jsonp"
)

3.1.1. 常用示例

// 1、只有路径
$.get("XXX/XXXXXX");
 
// 2、路径+参数【两个参数:姓名和年龄】
$.get("XXX/XXXXXX", {name: "John",age: "20"});
  
// 3、路径+参数+回调方法
$.get("XXX/XXXXXX", {name: "John",age: "20"},function(data){
	alert("返回的数据是:"+data);
});
 
// 4、路径+参数+回调方法+返回值类型【json】
$.get("XXX/XXXXXX", {name: "John",age: "20"},function(data){
	alert("返回的数据是:"+data);
},"json"));

3.2. $.post() 请求

$.post() 是以 POST 方式实现 Ajax 异步请求的

$.post(
    url,          //必需:将请求发送到哪里的URL链接
    data,         //可选:连同请求发送到服务器的数据【俗称:参数】
    success(      //可选:当请求成功时运行的函数
        response, //包含来自请求的结果数据
        status,   // 包含请求的状态
        xhr       //包含 XMLHttpRequest 对象
    ),
    dataType      //可选:预计的服务器响应的数据类型
                  //默认jQuery 将智能判断。可能的类型有:"xml"、"html"、"text"、"script"、"json"和"jsonp"
)

3.2.1. 常用示例

// 1、只有路径
$.post("XXX/XXXXXX");
 
// 2、路径+参数【两个参数:姓名和年龄】
$.post("XXX/XXXXXX", {name: "John",age: "20"});
  
// 3、路径+参数+回调方法
$.post("XXX/XXXXXX", {name: "John",age: "20"},function(data){
	alert("返回的数据是:"+data);
});
 
// 4、路径+参数+回调方法+返回值类型【json】
$.post("XXX/XXXXXX", {name: "John",age: "20"},function(data){
	alert("返回的数据是:"+data);
},"json"));

3.3. $.ajax() 请求

$.ajax() 方法用于执行 Ajax 的请求。所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求

$.ajax({
	url : 'XXXXXX/XXXXXXXX',// 请求链接
	type:"POST",   			// 请求方式POST或GET
   	async:true, 			// 请求是否异步:默认为异步
   	data : { 				// 参数
       	id : $("#id").val(),
       	name: $("#name").val()
   	},
   	dataType : 'json', 		// 返回值的数据类型
   	success : function(map) {
      	alert("执行成功后的回调函数");
   	}
});

你可能感兴趣的