前端Ajax

一、什么是Ajax

Ajax(Asynchronous JavaScript And XML)异步JavaScript和XML,是一种创建交互式网页应用的网页开发技术,能够向服务器请求额外的数据而无须卸载页面,对网页的某部分进行更新。Ajax不是一种新的编程语言,而是用于创建更快及交互性更强的web应用程序的技术。

二、XMLHttpRequest(Ajax技术的核心,简称XHR)

这是微软首先引入的一个特性,在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口,能够以异步方式从服务器取得更多信息,再通过DOM将数据插入到页面中。Ajax通信与数据格式无关。

IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象,这些浏览器创建XHR对象要使用XMLHttpRequest()构造函数

var xhr=new XMLHttpRequest();

启动请求以备发送:xhr.open("get","example.php",false);

发送请求:xhr.send(null);send方法接收一个参数,这个参数作为请求主体发送的数据,不需要请求主体发送数据则必须传入null

取消异步请求:xhr.abort();

设置自定义请求头部信息:xhr.setRequestHeader();要成功发送请求头部信息,必须在调用open()方法之后且调用send()方法之前

获取响应头部信息:xhr.getResponseHeader();和xhr.getAllResponseHeaders();

三、GET和POST请求

GET是最常见的请求类型,最常用于向服务器查询信息。可以将查询字符串参数追加到url的末尾,get请求经常会发生一个错误,就是查询字符串的格式问题,所以查询字符串的每个参数名称和值都必须使用encodeURIComponent()进行编码

xhr.open("get","example.php?name=value&age=value",true);

POST使用频率仅次于GET,通常用于向服务器发送应该被保存的数据,post请求把数据作为请求的主体提交,请求的主体可以包含多种数据而且格式不限

与GET请求相比,POST请求消耗的资源会更多,GET请求的速度最多可达到POST请求的两倍。

四、CORS(Cross-Origin Resource Sharing)跨域源资源共享

XHR对象只能访问与包含它的页面位于同一域中的资源,这种安全策略可以预防某些恶意行为。

必须进行跨域访问资源时,使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是否成功。

发送请求时附加一个Origin头部,其中包含页面的源信息(协议、域名和端口),例:Origin:http://www.zon.com

服务器接受这个请求,就在Access-Control-Allow-Origin头部中回发相同的源信息,例:Access-Control-Allow-Origin:http://www.zon.com

五、其他跨域技术

在CORS出现之前,要实现跨域Ajax通信颇费一些周折

(1)图像Ping

图像Ping是与服务器进行简单、单向的跨域通信的一种方式,请求的数据是通过查询字符串形式发送的(只能发送get请求),而响应可以是任意内容(但无法访问服务器响应文本),但通常是像素图或204响应,通过图像ping,浏览器得不到任何具体的数据,但通过侦听load和error事件,可以知道响应是什么时候接收到。

var img=new Image();

img.onload=image.onerror=function(){ };

img.src="http://www.example.com/test?name=LengFeng";

请求从设置src属性那一刻开始,本例中发送一个name参数

(2)JSONP(JSON with padding)填充式JSON或参数式JSON

是应用JSON的一种新方法,由回调函数和数据两部分组成,回调函数的名字一般是在请求中指定,而数据就是传入回调函数中的JSON数据,下面是一个典型的JSONP请求

http://freegeoip.net/json/?callback=handleResponse

JSONP是通过动态<script>元素来使用的,使用时可以为src属性指定一个跨域url,jsonp是有效的js代码,所以在请求完成后,即在jsonp响应加载到页面中以后,就会立即执行,jsonp与图像ping相比优点在于能够直接访问响应文本,支持在浏览器与服务器之间双向通信,不过jsonp也有不足之处,jsonp是从其他域加载代码执行,如果其他域不安全,只能放弃jsonp调用,而且要确定jsonp请求是否失败也不容易,开发人员不得不使用计时器检测指定时间内是否接收到响应

更多跨域解决方法还没整理,本文章还会不定期更新,谢谢大家关注,我是冷风

猜你喜欢

转载自blog.csdn.net/qq_36764457/article/details/81268565