前端页面如何发起ajax请求（web前端开发中的Ajax是什么）

欢迎大神评论指正欢迎关注前端小白一锅，下面我们就来说一说关于前端页面如何发起ajax请求?我们一起去了解并探讨一下这个问题吧!

前端页面如何发起ajax请求

欢迎大神评论指正！欢迎关注前端小白一锅！

什么是Ajax？

Ajax是无需刷新页面就能够从服务器取得数据的一种方法。它的出现使得向服务器请求额外的数据而无需卸载页面，从而带来了更好地用户体验。

Ajax全称为Asynchronous JavaScript and HTML，即异步获取数据的概念，是Jesse James Garrett在2005年提出的一种新的客户端与服务器数据交换方法。

XMLHttpRequest对象

负责Ajax运作的核心对象是XMLHttpRequest（XHR）对象。

该对象有5个关键属性，在进行Ajax通信时有着关键的作用。responseText（作为响应主体被返回的文本）、responseXML(如果响应的内容类型是“text/xml”或“application/xml”，这个属性中将保存包含着响应数据的XML DOM文档)、status（响应的HTTP状态）、statusText（HTTP状态的说明）、readyState（表示请求/响应过程的当前活动阶段）。

readyState有0到4一共5个取值，每当readyState的值发生变化时，都会触发一次readystatechange事件。

readyState：0（未初始化，表示尚未调用open（）方法）；

readyState：1（启动，表示已经调用open（）方法，但还未调用send（）方法）

readyState：2（发送，表示已经调用send（）方法，但未收到响应）

readyState：3（接收，表示已经接收到部分响应数据）

readyState：4（完成，表示已经接收到全部响应数据，并且可以在客户端使用了）

XMLHttpRequest对象方法

open（）方法用于开启一个请求，以备发送。调用方式为xhr.open（method，url [,async=true]）;

其中method为上面说过的HTTP方法（例如，GET、POST），url为资源地址，async默认为真，用于设置异步请求。

setRequestheader（）方法用于设置自定义的请求头部信息。调用方式为xhr.setRequestHeader（header，value）；

其中接受的两个参数分别是头部字段的名称和值。

注意：要成功发送请求头部信息，必须在调用open（）方法之后，调用send（）方法之前调用setRequestHeader（）方法。

send（）方法用于正式向服务器端发起请求。调用方式为xhr.send（[data=null]）;

接受一个参数，即是要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null。

一个完整的Ajax调用示例

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

xhr.onreadystatechange=function(callback){

if(xhr.ready State===4){

if((xhr.status>==200&&xhr.status<300)||xhr.status===304){

callback(xhr.response Text);

}else{

console.error('Request is unsuccessful:' xhr.status);} } } //处理返回数据

xhr.open('get','exmaple.json',true); //发送请求时调用open方法

xhr.set Request Header('my Header','my Value'); //发送请求时设置头部信息

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

请求参数系列化

当需要在请求参数的URL地址上加上查询字符串的时候，由于我们获取到的查询参数多是以JS对象的数据形式，这时就需要先将这些对象转化为字符串，再添加到URL地址上。

这里我们需要一个将对象转化为字符串的函数。

同源策略

同源策略是对XHR的一个主要约束，它为通信设置了“相同的域、相同的端口、相同的协议”这一限制，试图访问上述限制之外的资源，都会引发安全错误，除非采用被认可的跨域解决方案。

跨域资源共享

跨域资源共享CROS定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。其背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败。

收藏转发请先关注！谢谢~

,