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可以接收任何形式的文档,那么就不得不提到在网络传输中常用的两个数据格式。
两种常用的数据格式XML和JSON?
XML:
XML的定义:可扩展标记语言,是一种用于标记电子文件使其具有结构性的标记语言。
XML的规范:
1、必须有一个根元素
2、不可有空格、不可以数字或.开头、大小写敏感
3、不可交叉嵌套
4、属性双引号(浏览器自动修正成双引号了)
5、特殊符号要使用实体
6、注释和HTML一样
虽然可以描述和传输复杂数据,但是其解析过于复杂并且体积较大,所以实现开发已经很少使用了。
XML使用步骤简述:
由于XML是DOM对象,可以直接DOM方法,
1、var xml=xhr.responseXML;获取XML(PHP给的接口)
2、var items=xml.querySelector('item');获取xml的文档结构
3、字符串拼接
3.1、初始化var html='';
3.2、遍历for(){获取数据var item=item[i],}拼接html+='标签+数据'
4、渲染document.querySelector('tbody').innerHTHML=html
JSON:
JSON定义:JavaScript Object Notation,另一种轻量级的文本数据交换格式,独立于语言。
JSON的规范:
1、数据在名称/值对中
2、数据由逗号分隔(最后一个健/值对不能带逗号)
3、花括号保存对象方括号保存数组
4、使用双引号
JSON的跨语言解析:
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);
tips: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都表示响应主体
接下来简述一下用原生js来编写AJAX,利用类似JQuery的方法,这样可以尽快的理解JQuery的AJAX封装
(以下内容中不是完整代码,仅是步骤思路)
1.封装ajax函数
window.$={};
$.ajax=function(options){};
2.定义参数
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); //如果有数据则剪掉最后一个&
3.ajax编程
3.1初始化
var xhr=new XMLHttpRequest();
3.2请求行
xhr.open(type,type=='get'?url+'?'+dataStr:url,async); //如果是get,则需要在url后拼接数据,是post则不用
3.3请求头
if (type=='post') {xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');} //如果是post则需要写固定格式,是get则不用
3.4请求主体
xhr.send(type=='get'?null:dataStr); //如果是post则需要传数据,是get则传null
3.5监听响应状态
xhr.onreadystatechange=function(){}
3.5.1响应成功(处理success函数)
if(xhr.readyState==4&&xhr.status==200){} //1、获取状态行(包括状态码&状态信息)
var result=""; //空字符串,接收数据
var contentType=xhr.getResponseHeaderr('Content-Type'); //2、获取响应头
//3.以下为响应主体
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传入
3.5.2响应失败(处理error函数)
else{options.error&&options.error("request fail code"+xhr.status)} //设置error为options对象的函数,并提示状态码错误
未完待续...2016-08-13 22:54:40