随心记录

Bug不空,誓不成佛

  menu
70 文章
14633 浏览
2 当前访客
ღゝ◡╹)ノ❤️

JQuery 与 原生 Ajax 的请求

学习内容

* Ajax 简介
	* 使用场景 
	* 好处
* JQuery 的 ajax 请求
	* $.ajax() 的使用
	* get 与 post 请求
	* $.get() 的使用
	* $.post() 的使用
	* FormData 的使用
* 原生 ajax 请求
	* 简单原生 ajax
	* onload 与 onreadystatechange 的区别
	* get 请求
	* post 请求

一、Ajax 简介

① Ajax

AJAX 全称是:Asynchronous JavaScript And Xml。(async:表示异步,sync:表示同步)

  • 异步的 JavaScript 和 XML。
  • 是一种创建交互网页应用的网页开发技术。并不是一种新技术,而是一种解决方案,早在1998年就开始使用
  • 异步表示不阻塞:浏览器在请求数据时,并不会阻塞用户后续的操作。理解为浏览器派了一个小弟去服务器拿数据了。
  • XML 表示一种数据格式,最初设计 AJAX 时,从服务器返回的数据是 XML 格式的,后面慢慢被 JSON 数据格式取代了。
  • 更具体一点,浏览器通过内置对象 XMLHttpRequest 向服务器发起请求,并可以接受服务器返回给浏览器的数据,这一过程或实现这一过程的技术就是 AJAX。
    1559015806411.png

② 典型的使用场景

在不更细页面的情况下(页面有没有更新就检查后退按钮),浏览器要从 web 服务器获取数据,此时就可以使用 ajax 技术。通常在秒杀页面,注册表单等经常使用。

③ AJAX 技术的好处:

  • 局部更新,提升用户体验,提升性能。
  • 分离开发,提高开发效率。在项目实际开发过程中,ajax是一个必不可少的技术,是前后端分离开发的基础。
    • 后端提供写好的业务逻辑接口,可以理解为一个函数,它内部进行一些列操作处理。
    • 前端直接拿到接口文档,直接调用接口获取数据,然后把数据转化成的图文并茂的页面。

二、使用 JQuery 的 AJAX

  • 使用基本流程
    • 准备工作:确保服务器端口已经就绪,各接口工作正常。
    • 新建页面,引入 JQuery 文件
    • 参考 API 文档中 $.ajax 格式,发送请求。
  • $.ajax() 的基本格式
$.ajax(
	url,
	{
		type: 'get', // post
		data: {id:1},
		success: function (result) {
			console.log(result);
		}
	}
)
// url:表示请求的地址,可以省略域名。
// type:表示请求的类型,常见取值 get,post。如果不写,默认为 'get'
// data:表示发送请求时附加的参数,如果没事参数,可省略
// success:它是一个回调函数,当请求成功之后会自动调用这个函数,它的第一个参数是服务器端返回的数据。
  • 回调函数(CallBack Functions)
    • 作用:用于对特定的事件或条件进行响应。
    • 两层含义:
      • 函数。表示他是一个函数,是可以被执行的,能做具体操作的函数。
      • 回调。在某个时刻,或者某个事件发生'自动去调用这个函数'。

① get 与 post 请求

  • 不同点:
    • get:获取,得到。这种方式请求用于向服务器请求资源(图片,文件,数据...)。它是最常见的请求方式。它的重点在于,它只是请求,而不会改变服务器上的资源。
    • post:派送,投递。这种方式的请求用于向服务器上提交数据,它的重点在于,它可能会修改服务器上的资源。
  • 相同点
    • get 和 post 请求都可以在发送请求时附带一些数据。例如:根据用户名去检查这个用户是否被占用;在论坛上中注册一个账号。
    • get 和 post 请求都能够从服务器上获取返回的数据。
  • 实操对比
    • get 传数据直接显示在 url 中
      query string parameters 查询字符串参数
    • post 传递数据更安全
      form Data表单(形式)数据
  • 常用场景
    • 查看商品详情(get)
    • 把一件商品放入购物车(post)
    • 修改登录密码(post)
    • 发表一个帖子(post)
    • 删除一个用户(post)

② $.get() 的使用

  • 语法:
$.get(
	url,
	data, // key/value 参数
	callback, // 载入成功的回调函数
	type // 返回内容格式,xml,html,script,json,text,_default
)
  • 代码示例:
    • 请求接口,忽略返回值:
    	$.get('http://localhost:3001/test');
    
    • 请求接口,传送两个参数,忽略返回值
    	$.get('http://localhost:3001/test',{name:'John',time:'2pm'});
    
    • 显示请求接口的返回值
    	$.get('http://localhost:3001/test',function(data){
    		alert('Data Loaded: ' + data);
    	});
    
    • 显示请求接口的返回结果,并且发送请求参数
    	$.get('http://localhost:3001/test',function(data) {
    		function(data) {
    			alert('Data Loaded: ' + data);
    		}
    	}
    

② $.post() 的使用

  • 语法:
$.post(
	url,	// 发送请求地址
	data,	// 待发送 Key/Value 参数
	callback,	// 发送成功时回调函数
	type	// 返回内容格式,xml,html,script,json,text,_default
);
  • 代码示例:
    	// 请求接口,忽略返回值
    	$.post('http://localhost:3001/test');
    
    	// 请求接口,并且发送请求参数
    	$.post('http://localhost:3001/test',{name:'mike',time:'2pm'});
    
    	// 请求接口,并且传递数据数组
    	$.post('http://localhost:3001/test',{'choices[]' : ['Jon', 'Susan']});
    
    	// 使用 ajax 请求发送表单数据
    	$.post('http://localhost:3001/test', $('#testform').serialize());
    	// serialize:方法通过序列化表单值,创建 URL 编码文本字符串。您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
    
    	// 输出来自请求接口返回的结果
    	$.post('http://localhost:3001/test', function(data){
    		alert('Data Loaded:' + data);
    	})
    
    	// 向接口发送请求及参数,并输出结果
    	$.post('http://localhost:3001/test',{name:'John',time:'2pm'},function(data){
    		alert('Data Loaded: ' + data);
    	});
    
    	// 获取接口请求,并存储为 XMLHttpResponse 对象,并通过 process() 这个 JavaScript 函数进行处理
    	$.post('http://localhost:3001/test',{name:'John',time:'2pm'},function(data){
    		process(data);
    	},'xml');
    
    	// 获取请求接口返回的 JSON 格式的内容
    	$.post('http://localhost:3001/test',{'func':'getNameAndTime'},function(data) {
    		alert(data.name);
    		console.log(data.time);
    	},'json');
    

③ JQuery FormData 的使用

FormData 是表单元素的集合,当要提交表单内容过多时,可使用 FormData 直接提交表单元素

  • 使用步骤
    • 创建FormData实例化对象 var formData = new FormData(表单的DOM对象)
    • 将 formData 当做请求参数传递进去
    • 设置 contentType 与 processData 属性为 false
    • 示例:
    	$.ajax({
    		url:'http://loaclhost:3005/test',
    		data : new FormData($('form')[0]),
    		contentType : false,
    		processData : false,
    		sueecss : function(res) {
    			do something...
    		}
    	})
    

三、使用原生 AJAX

① 原生 AJAX 的简单请求

  • XMLHttpRequest 对象
  • 使用原生 ajax 步骤
    • new 一个 XMLHttpRequest 实例对象
    • 设置请求信息
    • 设置回调函数,处理请求结果
    • 发送请求
  • 示例代码:
// 实例化一个 XMLHttpResponse 对象
var xhr = new XMLHttpResponse();

// 设置请求信息,使用 xhr.open() 建立请求连接 xhr.open('get | post', url);
xhr.open('get','common/getCurrentTime');

// 设置回调函数。返回的数据存放在 xhr.responseText 中,onload 为当请求结束,状态码为4时将回调执行,也可使用 onreadystatechange 状态码改变来执行,其两者区别下面说明
xhr.onload = function() {
	console.info('从服务器返回的数据', xhr.responseText);
};

// 发送请求
xhr.send();

② xhr.onload() 与 xhr.onreadystatechange() 的区别

  • 首先明确两个知识点
    • xhr.readyState 状态码
      • 0. 请求未初始化
      • 1. 已建立连接
      • 2. 请求已发送
      • 3. 信息接收中
      • 4. 信息接收完毕
    • HTTP 状态码:
      • 200 - 成功返回网页
      • 404 - 网页不存在
      • 503 - 服务器暂时不可用
  • xhr.onload() 当请求码变成 4 时,即信息接收完毕会执行该函数
  • xhr.onreadystatechange() 当请求状态码发生变化时会调用,也就是每变化一次将调用一次,另外 xhr.onprogress() 在状态码为 3 时会自动调用一次。所以当服务器正常时,请求过程中状态码从 0~4 的变化,但不一定会正确的得到请求数据,所有还是需要有 http 状态码来判断。
  • xhr.onload() 与 xhr.onreadystatechange() 的兼容问题:
    • xhr.onload() 出现在 IE9 及其以后,如果在 IE9 之前得到返回结果就是用 onreadystatechange,当 readyState 为 4 时获取返回信息
    • xhr.onreadystatechange() 有跨浏览器兼容性问题,有时会发现请求失败,那么此时将 xhr.onreadystatechange() 放在 xhr.open() 之前,就可以避免这个问题。

③ get 请求

代码如下:

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 建立 get 请求
xhr.open('get',url);	// 如果有请求参数,需在 url 后面追加参数,例如url + '?id=1&name=client';
// 发送请求
xhr.send();
// 设置回调处理事件
xhr.onload = function() {
	// xhr.responseText 返回结果,如有需要可以转换 JSON 格式
	do something...
}
xhr.onreadystatechange = function() {
	if(xhr.readystate === 4) {
		do something...
	}
}

④ post 请求

代码如下:

// 创建 xhr 对象
var xhr = new XMLHttpRequest();

// 设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');	// 如果将来 send 时传入的是 FormData 就不用设置请求头,如果是其他参数类型则需要设置请求头对请求参数进行处理。

// 建立连接
xhr.open('post',url);	// post 请求的参数不写在 url 的后面
// 发送请求
xhr.send(arg);	// 需要写入请求参数,格式为'id=2&name=client',也可直接传入 FormData 的实例化对象
内事不懂问百度,外事不懂问谷歌~