Ajax

概念

　　Ajax，即异步的JavaScript和XML（Asynchronous JavaScript and XML），是一种无需从新加载整个网页的状况下，更新部分网页的技术

优势

1. 经过异步模式，提高用户体验
2. 优化浏览器和服务器间传输，减小没必要要的数据往返以及带宽占用
3. 在客户端运行时，承担了一部分服务器承担的工做，减小了大用户量下的服务器负载

缺点

1. 不支持浏览器的回退（back）按钮
2. 会暴露和服务器交流的细节，存在安全问题
3. 对搜索引擎支持较弱

 

使用步骤

　　通常包括三步

1. 建立XMLHttpRequest对象（异步调用对象）
2. 建立新的HTTP请求，指定该HTTP请求的方法、URL
3. 设置响应HTTP请求状态变化的函数

　　须要注意的是，Ajax须要与服务器通讯，所以须要用服务器启动，而不是直接在浏览器中打开页面

　　这里使用Wampserver64来访问，下载地址（提取码：gixc）和使用说明（提取码：u3lw）见连接

建立XMLHttpRequest对象

　　XMLHttpRequest是Ajax的核心，一种支持异步请求的技术

　　能够向服务器提出请求并处理响应，不阻塞用户，在页面加载后进行页面的局部更新

　　这一对象由于在不一样浏览器中支持方式不一样，因此须要考虑兼容性

 1 //Ajax第一步，建立XMLHttpRequest对象
 2 //封装通用的xhr，兼容各个版本
 3 function createXHR(){
 4     //判断浏览器是否将XMLHttpRequest做为本地对象实现，针对firefox、opera等
 5     if(typeof XMLHttpRequest != 'undefined'){
 6         return new XMLHttpRequest();
 7     }
 8     else if(typeof ActiveXObject != 'undefined'){
 9         //将全部可能出现的ActiveXObject版本放在一个数组里
10         var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
11         //遍历建立XMLHttpRequest对象
12         var len = xhrArr.length;
13         var xhr;
14         for(var i=0;i<len;i++){
15             try{
16                 //建立XMLHttpRequest对象
17                 xhr = new ActiveXObject(xhrArr[i]);
18                 //遇到支持的版本号就退出
19                 break;
20             }
21             //若是当前循环的版本号不支持，捕获错误可是没有操做
22             catch(ex){
23 
24             }
25         }
26         return xhr;
27     }
28     else{
29         throw new Error('No XHR object available!');
30     }
31 }

XMLHttpRequest建立

　　也能够不用考虑过多的版本号，直接分IE和非IE来建立XMLHttpRequest

1 var xmlhttp;
2 if(window.XMLHttpRequest){
3     //针对IE7+、Firefox、Chrome、Opera、Safari
4     xmlhttp = new XMLHttpRequest();
5 }
6 else{
7     //针对IE六、IE5
8     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
9 }

XMLHttpRequest建立2

 

建立HTTP请求

　　用XMLHttpRequest对象的open方法来建立（注意是建立而不是发送）

　　该方法初始化请求，准备发送同一个域中使用相同协议和端口的URL发送请求，不然会由于安全缘由报错

　　其中包括三个参数

请求类型

　　分get和post两种

　　get速度快，大部分状况下均可使用

　　post在如下三种状况下是get没法替代的：

1. 没法使用缓存文件（更新服务器上文件/数据库时）
2. 向服务器发送大量数据（post方法没有发送的数据量限制）
3. 发送包含未知字符的用户输入

URL

　　文件在服务器上位置，open方法中惟一必须传入的参数

　　这里的文件能够为任何类型的/服务器脚本文件

async

　　一个布尔值，默认为true（异步），也可设置false（同步）

 

设置状态请求变化函数

　　用函数监测XMLHttpRequest的readystatechange属性变化状况

　　其中readyState属性值为4时，表示异步响应内容解析完成，能够在客户端调用

　　status属性值在[200,300)时，表示异步调用（交易）成功

　　status属性值为304时，表示请求资源没有被修改，能够用浏览器缓存（即以前用过异步相同内容并且成功了，该内容在缓存中）

 1 //响应XMLHttpRequest对象状态变化的函数
 2 //onreadystatechange在readystatechange属性变化时触发
 3 xhr.onreadystatechange = function(){
 4     //异步响应内容解析完成，能够在客户端调用
 5     if(xhr.readyState === 4){
 6         //异步调用（交易）成功，或者请求资源没有被修改，能够用浏览器缓存（即以前用过异步并且成功了）
 7         if((xhr.status >=200 && xhr.status<300) || xhr.status === 304){
 8             //返回服务器数据
 9         }
10     }
11 }

onReadyStateChange

发送请求

　　用send方法向服务器发送请求

　　其中当建立请求（open方法）的请求方法为post时，才可传入字符串/对象，不然值只可传入null

　　在post前，须要先用setRequestHeader方法添加HTTP头（固定写法，以下），而后才能发送数据

1 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

 

获取服务器端返回的数据

　　在收到响应后，XMLHttpRequest的四个属性会被填充，能够从responseText/responseXML来得到从服务器进程返回的数据

　　其中responseText是字符串形式（使用较多），responseXML是DOM兼容的文档数据对象

 

渲染数据

　　获取服务器端返回的数据后，能够把该数据添加到当前HTML中

　　添加的方法包括DOM操做、字符串拼接等 

 

JSON

概念

　　即JavaScript对象表示法（JavaScript object notation），一种数据交换的文本格式，并非编程语言

语法规则

　　JSON能够支持JavaScript中的基本类型、数组、对象

　　基本类型中，字符串必须用双引号表示，数值必须用十进制表示，不能用NaN和Infinity，不支持undefined

　　对象中，键名必须放在双引号中，对象的末尾没有分号，且同一个对象中不可出现两个同名属性

　　数组/对象中最后一个成员后不可加逗号

方法

parse()

　　把JSON字符串转化成对象

　　语法为JSON.parse(JSON字符串)

　　JavaScript中的eval方法与其相似，可是也能够执行不符合JSON格式的代码，所以尽量少用

stringify()

　　把一个值转成符合JSON格式的字符串，并能够被JSON.parse()方法还原

　　语法为JSON.stringify(原生JavaScript值)

 

Jquery的Ajax方法

　　主要使用的是$.ajax()方法

　　内部包括五个参数：请求地址、请求方式、同步异步、数据格式以及请求成功的回调

 1 $.ajax({
 2     url:"./server/slider.json",
 3     type:"post",
 4     async:true,
 5     dataType:"json",
 6     success:function(imgData){
 7         jQurenderDataToDom(imgData);
 8         //这一步是请求成功以后的渲染数据的函数
 9     }
10 })

jQuery的Ajax

 

跨域

定义

　　从一个域名网页请求另外一个域名资源，也就是只要协议、域名、端口三者其一有不一样，就是跨域

　　其中域名、协议、端口均相同时，被称做同源

解决方法

　　跨域资源共享（CORS）、JSONP（经常使用）、修改document.domain、使用window.name

JSONP

　　即填充式JSON（JSON with padding），一种跨域解决方案

　　JSONP包括回调函数（响应到来时页面中调用的函数，由用户提供）和数据（传入回调函数中的JSON数据，由服务器返回）

　　JSONP是利用了在页面上能够引入不一样域上的js脚本文件来实现的

 1 //封装JSONP
 2 function getJSONP(url,callback){
 3     if(!url){
 4         return;
 5     }
 6     //声明数组用来随机生成函数名
 7     var a = ['a','b','c','d','e','f','g','h','i','j'],
 8         r1 = Math.floor(Math.random()*a.length),
 9         r2 = Math.floor(Math.random()*a.length),
10         r3 = Math.floor(Math.random()*a.length),
11         name = 'getJSONP'+a[r1]+a[r2]+a[r3],//这里不用getJSONP打头也能够
12         cbname = 'getJSONP.'+name;//这里是未来服务端传回的getJSONP的属性值，必须以getJSONP打头
13     //判断url中是否含有？
14     if(url.indexOf('?') === -1){
15         url += '?jsonp=' + cbname;
16     }
17     else{//在url地址的?参数后面再加一个新参数，所以用&隔开
18         url += '&jsonp' + cbname;
19     }
20     //动态建立script标签
21     var script = document.createElement('script');
22     //定义被脚本文件执行的回调函数（最核心部分）
23     getJSONP[name] = function(data){
24         try{
25             callback && callback();
26         }
27         catch(e){
28          }
29         finally{
30             //不管是否执行成功，删除getJSONP的属性以及回调函数，以释放内存空间
31             delete getJSONP[name];
32             script.parentNode.removeChild(script);
33         }
34     }
35     //定义script的src，把这个新的script添加到head标签的最后
36     script.src = url;
37     document.getElementsByTagName('head')[0].appendChild(script);
38 }

跨域封装