AJAX应用中必须要掌握的知识!

AJAX是什么?

　　是Asynchronous Javascript And XML的首字母的缩写， 它不是一门的新的语言，而是对现有技术的综合利用。 其本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

异步的概念?

　　指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。

异步的作用?

　　其优势在于不阻塞程序的执行，从而提升整体执行效率。

AJAX的核心?

　　XMLHTTPRequest，简写XHR，Xml可扩展标记语言，Http超文本传输协议，Request请求。XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。它可以接收任何形式的文本文档，是 AJAX 的 Web 应用程序架构的一项关键功能。

　　前文说到XMLHTTPRequest可以接收任何形式的文档，那么就不得不提到在网络传输中常用的两个数据格式。

两种常用的数据格式ＸＭＬ和ＪＳＯＮ？

ＸＭＬ：

　　ＸＭＬ的定义：可扩展标记语言，是一种用于标记电子文件使其具有结构性的标记语言。

　　ＸＭＬ的规范：

　　　　1、必须有一个根元素
　　　　2、不可有空格、不可以数字或.开头、大小写敏感
　　　　3、不可交叉嵌套
　　　　4、属性双引号（浏览器自动修正成双引号了）
　　　　5、特殊符号要使用实体
　　　　6、注释和HTML一样
　　　　虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。

　　ＸＭＬ使用步骤简述：

　　　　由于ＸＭＬ是ＤＯＭ对象，可以直接ＤＯＭ方法，

　　　　１、var xml=xhr.responseXML;获取XML(PHP给的接口)

　　　　２、var items=xml.querySelector('item');获取xml的文档结构

　　　　３、字符串拼接

　　　　　　３.１、初始化var html='';

　　　　　　３.２、遍历for(){获取数据var item=item[i]，}拼接html+='标签+数据'

　　　　４、渲染document.querySelector('tbody').innerHTHML=html

 ＪＳＯＮ：

　　ＪＳＯＮ定义：JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。

　　ＪＳＯＮ的规范：

　　　　1、数据在名称/值对中
　　　　2、数据由逗号分隔(最后一个健/值对不能带逗号)
　　　　3、花括号保存对象方括号保存数组
　　　　4、使用双引号

　　ＪＳＯＮ的跨语言解析：

　　　　JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取。

　　　　1、PHP解析方法

　　　　　　数组转json字符 json_encode－＞$json_array = json_encode($array)；

　　　　　　json字符转成数组 json_decode－＞$array_json = json_decode($json_array);

　　　　2、Javascript 解析方法

　　　　　　字符串转对象parse－＞var jsonObj=JSON.parse(jsonStr)；

　　　　　　对象转字符串stringify－＞var jsonStr=JSON.stringify(jsonObj)；

　　ｔｉｐｓ：JSON兼容处理引用json2.js

XMLHttpRequest中的事件监听onreadystatechange？

　　onreadystatechange中两条重要的信息:1.states　2.readyState;

　　**状态码states**
　　　200:代表成功
　　　304:文档未修改
　　　403:没有权限
　　　404:未找到
　　　500:服务器错误

　　**readyState**
　　　0：var请求未初始化（还没有调用 open()）。
　　　1：open请求已经建立，但是还没有发送（还没有调用 send()）。
　　　2：send请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
　　　3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
　　　4：响应已完成；您可以获取并使用服务器的响应了。

　　另外还有一些API，简述一下，有兴趣的同学可以自行百度：

　　　　xhr.open() 发起请求，可以是get、post方式

　　　　xhr.setRequestHeader() 设置请求头

　　　　xhr.send() 发送请求主体get方式使用xhr.send(null)

　　　　xhr.onreadystatechange = function () {} 监听响应状态

　　　　xhr.status表示响应码，如200

　　　　xhr.statusText表示响应信息，如OK

　　　　xhr.getAllResponseHeaders() 获取全部响应头信息

　　　　xhr.getResponseHeader('key') 获取指定头信息

　　　　xhr.responseText、xhr.responseXML都表示响应主体

接下来简述一下用原生ｊｓ来编写ＡＪＡＸ，利用类似ＪＱｕｅｒｙ的方法，这样可以尽快的理解ＪＱｕｅｒｙ的ＡＪＡＸ封装

（以下内容中不是完整代码，仅是步骤思路）

１.封装ajax函数

　　window.$={}；

　　$.ajax=function(options){}；

２.定义参数

　　if(!options){return false}　　／／如果没有传参,则退出

　　var type=options.type||"get";　　／／设置type为options对象属性,不传参则默认get

　　var url=options.url||location.pathname　　／／设置url为options对象属性,不传参则默认相对路径

　　var async=options.async===false?false:true;　　／／设置async为options对象属性,并强制asycn只能选true(同步)和false(异步)

　　var data=options.data||{}　　／／设置data为options对象属性,不传参则默认空

　　　　例如：　　　　　　

　　　　　　data:{name:"张三",age:"18"}

　　　　　　这种格式后台不认识,需要转换成name=&age=格式(对应JQ中serialize方法)　　　　

　　　　　　var dataStr="";
　　　　　　for (var key in data){dataStr+=key+"="+data[key]+"&"}
　　　　　　dataStr=dataStr&&dataStr.slice(0,-1);　　／／如果有数据则剪掉最后一个&

３.ajax编程

　　３.１初始化

　　　　var xhr=new XMLHttpRequest();

　　３.２请求行

　　　　xhr.open(type,type=='get'?url+'?'+dataStr:url,async);　　／／如果是get,则需要在url后拼接数据,是post则不用

　　３.３请求头

　　　　if (type=='post') {xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');}　　／／如果是post则需要写固定格式,是get则不用

　　３.４请求主体

　　　　xhr.send(type=='get'?null:dataStr);　　／／如果是post则需要传数据,是get则传null

　　３.５监听响应状态

　　　　xhr.onreadystatechange=function(){}

　　　　３.５.１响应成功(处理success函数)　　

　　　　　　if(xhr.readyState==4&&xhr.status==200){}　　／／1、获取状态行（包括状态码&状态信息）

　　　　　　var result="";　　／／空字符串,接收数据

　　　　　　var contentType=xhr.getResponseHeaderr('Content-Type');　　／／2、获取响应头　　

　　　　　　／／３.以下为响应主体

　　　　　　if(contentType.indexOf("xml")>-1) {　　　　／／后台返回的是xml数据格式，xml格式就是DOM对象
　　　　　　　　result=xhr.responseXML
　　　　　　}　

　　　　　　else if (contentType.indexOf("json")>-1) {　　／／后台返回的是json数据格式，格式转换成json对象
　　　　　　　　var str=xhr.responseText;
　　　　　　　　result=JSON.parse(str);
　　　　　　}

　　　　　　else{result=xhr.responseText}　　／／后台返回的是对象
　　　　　　options.success&&options.success(result)　　／／设置success为options对象的函数,并把后台的数据对象result传入

　　　　３.５.２响应失败(处理error函数)

　　　　　　else{options.error&&options.error("request fail code"+xhr.status)}　　／／设置error为options对象的函数,并提示状态码错误

未完待续．．．2016-08-13　　22:54:40