深入学习下AJAX_H5之家 - 中国HTML5教程资源分享第一站

> 编程开发 > AJAX相关 >

深入学习下AJAX 2017-02-16 14:43　出处：清屏网　人气：　

AJAX虽说是最早接触的，但一直只停留在业务层面，没能对其内部进行深究，今天就对AJAX和JSONP深入学习下。

AJAX 一、概念

AJAX维基百科解释

二、核心对象XMLHttpRequest

The XMLHttpRequest.abort() method aborts the request if it has already been sent. When a request is aborted, its readyState is set to 0 (UNSENT), but the readystatechange event is not fired (译文：XMLHttpRequest 是一个API, 它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。)

该对象请求是异步执行的，所以要通过回调函数(onreadystatechange) 获得响应，对象主要是通过 open() 、 send() 、方法并组合 readyState 、 status 、 responseText 属性来完成的。下面来说下 AJAX 步骤：

三、步骤 ① 创建兼容的XMLHttpRequest对象

该对象需要兼容下浏览器(毕竟奇葩的 IE)，通用的兼容方法：

// 跨浏览器兼容 var xhr; if(typeof XMLHttpRequest != "undefined"){ xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ var aVersions = ["Microsoft.XMLHttp","Msxml2.XMLHttp.5.0","Msxml2.XMLHttp.4.0","Msxml2.XMLHttp.3.0","Msxml2.XMLHttp"]; for(var i=0;i<aVersions.length;i++){ try{ xhr = new ActiveXObject(aVersions); break; }catch(e){} } } ② 初始化连接open()

xhr.open(method,url[,async, user, password]) ，有三个参数， method 有 GET 、 POST 、 PUT 、 DELETE 方法， url 是数据接口地址， async(可选) 是否异步( true (默认)/ false )， user(可选)、password(可选) 使用的比较少。

然后建立连接：

xhr.open('GET',':3000/api/test'); ③ 发送请求send()

xhr.send(data) ， data 可以是任意类型的数据，若是 GET 请求方式， data 可以为空/ null 。

发送请求：

xmlHttp.send(); ④ 等待回调结果

使用 onreadystatechange 回调函数，处理数据各种状态。当 readyState 为4，且 status 为200时，就返回成功。其它状态请参考下图。

readyState 码：

HTTP状态码( status )：

xhr.onreadystatechange = function(){ // 状态发生变化时，函数被回调 if(xhr.readyState === 4){ // 成功完成 // 判断响应结果： if(xhr.status === 200){ // 成功 document.write(xhr.responseText); document.write('\n'); }else{ // 失败 document.write('失败\n'); } }else{ document.write('还在请求中...\n'); } }; 解决跨域问题

首先需要知道，什么是跨域？同一域有哪些条件？

一、什么是跨域

下图是我在 (默认80端口)，去访问 :3000/api/test 的数据接口，结果无法访问，就涉及到跨域问题。

二、同域条件

域名相同( 和)是不一样的

端口一样( :80和:3000)是不一样的 (可能少数浏览器支持端口不一致访问，毕竟极少)

三、解决方案 1、设置header头(服务器端) Access-Control-Allow-Origin: *

此方法只需要在服务器端设置， * 代表任意请求来源，如果只想让特定的域名访问，直接改成

router.get('/api/test',function(req,res,next){ var json = { 'title':'Kylin', 'Content':'AjaxTest' }; res.header('Access-Control-Allow-Origin','*'); res.json(json); }); 2、JSONP(服务器端+客户端):

JSONP(JSON with Padding)解释，

服务器端

如果是 Express 写得后台，可以使用JSONP封装方法 res.jsonp() ，其它语言/框架写得后台，转换方法就是将 data 转成 callback(data) ，用一个函数名callback(其它名也可以，需要和前端约定，默认为callback)将数据包起来，原理通过比较理解。

通过比较 res.json() 和 res.jsonp() 发现， JSONP 是利用 <script src="url"></script> 脚本可以跨域的特点，去访问外部资源。

通过比较源码，差别如下： 1.增加了 callback 变量， app.get('jsonp callback name') 值默认为 callback ，这行代码是获取 url地址上的?callback= 后面的回调函数名。

2.源码中的 X-Content-Type-Options: nosniff 是用来增强安全性，防止 js 脚本被恶意执行。参考、 MDN X-Content-Type-Options

3.后面代码 body = '/**/ typeof ' + callback + ' === \'function\' && ' + callback + '(' + body + ');'; 大致意思就是将 data 数据传成 callback(data) 这种形式

客户端

通过创建 script 标签去获取：

var url = ":3000/api/test?callback=callback"; // 创建script标签，设置其属性 var script = document.createElement('script'); script.setAttribute('src', url); // 把script标签加入head，此时调用开始 document.getElementsByTagName('head')[0].appendChild(script); var callback = function(data){ var sum=''; for(var i in data){ sum += data['title']; } document.getElementsByTagName('body')[0].innerHTML = sum; };

文章有很多地方描述的可能不是很准确，提到的点也不够全面，如果有不对的地方，还望斧正！

分享给小伙伴们：

本文标签： AJAX/">AJAX

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻