即 Asynchronous [e'sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
1、 异步
指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。
其优势在于不阻塞程序的执行，从而提升整体执行效率。
XMLHttpRequest可以以异步方式的处理程序。
2、 XMLHttpRequest
浏览器内建对象，用于在后台与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。
/*初始化 XMLHttpRequest 可以以异步方式的处理程序*/
var xhr = new XMLHttpRequest();
/*js 内置的 http 请求对象 XMLHttpRequest*//*1.怎么使用 这个内置对象*/var xhr = new XMLHttpRequest;
/*2.怎么样去组请求*//*请求的行*/
xhr.open('post','01.php');
/*请求头*///get 没有必要设置//post 必须设置 Content-Type: application/x-www-form-urlencoded
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
/*请内容*//*3.发送请求*/
xhr.send("name=xjj&age=10");2.1、请求
HTTP请求3个组成部分与XMLHttpRequest方法的对应关系
1、请求行
/*设置请求行*/
/*第一个参数是请求的方式 第二个参数是请求的地址*/ 第三个参数是是否异步（async）async 默认是true*/
xhr.open('get','09.XMLHttpRequest.php?username=xjj&password=123456', true); //数据可以拼接到字符串上
xhr.open('post','01.php');2、请求头
/*请求头 注意 post必须设置请求头*/
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
get请求可以不设置3、请求主体
/*发送请求 以&符拼接*/
xhr.send('username=xjj&password=123456');
xhr.send("name=xjj&age=10");
get可以传空/*设置请求的内容 get方式的时候 发送的内容 null是不传任何东西的意思*/
xhr.send(null);
注意书写顺序
2.2、响应
HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。
HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系。
由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。
xhr.onreadystatechange = function(){
/*什么时候才算是http通讯结束 在readyState=4的是 响应完成*/
/*什么是才算是通讯成 status 200 */
//console.log(xhr.readyState);
//console.log(xhr.responseText);
if(xhr.readyState == 4 && xhr.status == 200){
if(xhr.readyState == 4 && xhr.status == 200){
console.log('ok');
console.log(xhr.responseText);
/*把内容渲染在页面当中*/document.querySelector('#result').innerHTML = xhr.responseText;
}**readyState**
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态
1、获取状态行（包括状态码&状态信息）
xhr.status 状态码 ![status.txt]()
xhr.statusText 状态码信息2、获取响应头
xhr.getResponseHeader('Content-Type');
xhr.getAllResponseHeaders();3、响应主体
xhr.responseText
xhr.responseXML我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML
2.3、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都表示响应主体注：GET和POST请求方式的差异（面试题）
1、GET没有请求主体，使用xhr.send(null) 一般是读取数据的时候用
2、GET可以通过在请求URL上添加请求参数
3、POST可以通过xhr.send('name=itcast&age=10') 传参数的时候使用
4、POST需要设置
5、GET效率更好（应用多）
6、GET大小限制约4K，POST则没有限制
3 XML
1、必须有一个根元素
<!--root 根节点是一定但添加的-->2、不可有空格、不可以数字或.开头、大小写敏感
3、不可交叉嵌套
4、属性双引号（浏览器自动修正成双引号了）
5、特殊符号要使用实体6、注释和HTML一样
虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。
/*xhr.responseXML*/返回的是一个dom对象*/
var xmlDom = xhr.responseXML//用它才能获取dom;//可以查询元素对象
var items = xmlDom.querySelectorAll('item');
<?php
//php必须是Content-Type:application/xml 才能返dom
header('Content-Type:application/xml;charset=utf-8');
/*返回内容是 application/xml */
/*php程序来获取xml内容*/
$xml = file_get_contents('01.xml');
<?xml version="1.0" encoding="UTF-8"?><root><arrayList><array><src>images/banner.jpg</src><newPirce>12.00</newPirce><oldPrice>30.00</oldPrice></array><array><src>images/banner.jpg</src><newPirce>12.00</newPirce><oldPrice>30.00</oldPrice></array></arrayList></root><?php
header('Content-Type:text/xml;charset=utf-8');
/*以xml格式传输数据的时候要求响应内容格式是 text/xml*//*file_get_contents 获取文件内容*/$xml = file_get_contents('01.xml');
/*输出xml内容*/echo$xml;
?>var xhr = new XMLHttpRequest;
xhr.open('get','01.php');
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
/*获取到XML格式内容 放回的是DOM对象 document*/var xml = xhr.responseXML;
/*通过选着器可以获取到xml的数据*/console.log(xml.querySelectorAll('array')[0].querySelector('src').innerHTML);
}
}4、 JSON
即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。
1、数据在名称/值对中2、数据由逗号分隔(最后一个健/值对不能带逗号)3、花括号保存对象方括号保存数组4、使用双引号
[
{"src":"images/detail01.jpg","oldPrice":"10.12","newPrice":"130.00"},
{"src":"images/detail02.jpg","oldPrice":"1.00","newPrice":"11.00"},
{"src":"images/detail03.jpg","oldPrice":"100.00","newPrice":"1000.00"}
]JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取
1、PHP解析方法
json_encode()、json_decode()
/*把php数组编码成json字符串 json_encode*/
$json_str = json_encode($json_obj);/*试用json_decode方法解析json字符串 解码成php数组 数组当中是php对象*/
$json_obj = json_decode($json);
<?php
header('Content-Type:text/html;charset=utf-8');
/*以json格式传输数据的时候要求响应内容格式是 application/json*//*注意也可以不设置 但是这遵循的一个规范*//*file_get_contents 获取文件内容*/$json = file_get_contents('01.json');
/*输出json内容*/echo$json;
echo'<br><br>';
$array = array(
array('src'=>'images/detail01.jpg','newPrice'=>'12.00','oldPrice'=>'455.00'),
array('src'=>'images/detail02.jpg','newPrice'=>'65.00','oldPrice'=>'878.00'),
array( 'src'=>'images/detail01.jpg','newPrice'=>'100.00','oldPrice'=>'1000.00')
);
/*将php数组转化成json字符*/$json_array = json_encode($array);
echo$json_array;
echo'<br><br>';
/*将json字符转化成php数组*/$array_json = json_decode($json_array);
echo$array_json;
echo'<br><br>';
?>1、Javascript 解析方法
JSON对象 JSON.parse()、JSON.stringify()；
JSON兼容处理json2.js总结：JSON体积小、解析方便且高效，在实际开发成为首选。
/*json字符串 怎么转化成js认识的对象 JSON 把这个对象叫做 json对象*/
var json_obj = JSON.parse(json);/*把json对象转成json字符串*/
var json_str = JSON.stringify(json_obj);
var xhr = new XMLHttpRequest;
xhr.open('get','01.php');
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
/*获取仅仅是字符串*/var text = xhr.responseText;
/*需要把字符串转化成JSON对象*/var json_obj = JSON.parse(text);
console.log(json_obj);
/*我们也可以把JSON对象转化成字符串*/var json_str = JSON.stringify(json_obj);
console.log(json_str);
}
}5、 兼容性
关于IE的兼容方面，了解即可。
functionXHR() {
var xhr;
try {
xhr = new XMLHttpRequest();
}
/*如果 try内的程序运行错误 抛出异常 捕捉异常 上面程序当中运行的错误*/catch(e) {
/*在不同的IE版本下初始 ActiveXObject 需要传入的标识*/var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i=0;i<IEXHRVers.length;i++) {
try {
xhr = new ActiveXObject(IEXHRVers[i]);
}
catch(e) {
/*如果出现错误的时候 停止当次的循环*/continue;
}
}
}
return xhr;
}8.6、 封装ajax工具函数![01.ajax.js]()
/**
* ITCAST WEB
* Created by zhousg on 2016/5/24.
*//*
* 1. 请求的类型 type get post
* 2. 请求地址 url
* 3. 是异步的还是同步的 async false true
* 4. 请求内容的格式 contentType
* 5. 传输的数据 data json对象
*
* 6.响应成功处理函数 success function
* 7.响应失败的处理函数 error function
*
* 这些都是动态参数 参数对象 options
* *//*封装一个函数*/window.$ = {};
/*申明一个ajax的方法*/
$.ajax = function(options){
if(!options || typeof options != 'object'){
returnfalse;
}
/*请求的类型*/var type = options.type || 'get';/*默认get*//*请求地址 */var url = options.url || location.pathname;/*当前的地址*//*是异步的还是同步的 */var async = (options.async === false)?false:true;/*默认异步*//*请求内容的格式 */var contentType = options.contentType || "text/html";
/*传输的数据 */var data = options.data || {};/*｛name:'',age:''｝*//*在提交的时候需要转成 name=xjj 这种格式*/var dataStr = ''/*数据字符串*/for(var key in data){
dataStr += key+'='+data[key]+'&';
}
dataStr = dataStr && dataStr.slice(0,-1);
/*ajax 编程*/var xhr = new XMLHttpRequest();
/*请求行*//*(type=='get'?url+'?'+dataStr:url)判断当前的请求类型*/
xhr.open(type,(type=='get'?url+'?'+dataStr:url),async);
/*请求头*/if(type == 'post'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
/*请求主体*//*需要判断请求类型*/
xhr.send(type=='get'?null:dataStr);
/*监听响应状态的改变 响应状态*/
xhr.onreadystatechange = function(){
/*请求响应完成并且成功*/if(xhr.readyState == 4 && xhr.status == 200){
/*success*/var data = '';
var contentType = xhr.getResponseHeader('Content-Type');
/*如果我们服务器返回的是xml*/if(contentType.indexOf('xml') > -1){
data = xhr.responseXML;
}
/*如果我们的服务器返回的是json字符串*/elseif(contentType.indexOf('json') > -1){
/*转化json对象*/
data = JSON.parse(xhr.responseText);
}
/*否则的话他就是字符串*/else{
data = xhr.responseText;
}
/*回调 成功处理函数*/
options.success && options.success(data);
}
/*计时请求xhr.status不成功 他也需要的响应完成才认作是一个错误的请求*/elseif(xhr.readyState == 4){
/*error*/
options.error && options.error('you request fail !');
}
}
}
$.post = function(options){
options.type = 'post';
$.ajax(options);
}
$.get = function(options){
options.type = 'get';
$.ajax(options);
}7、 jquery的ajax
- jQuery为我们提供了更强大的Ajax封装
- $.ajax({}) 可配置方式发起Ajax请求
- $.get() 以GET方式发起Ajax请求
- $.post() 以POST方式发起Ajax请求
- $('form').serialize() 序列化表单（即格式化key=val&key=val）
- url 接口地址
- type 请求方式
- timeout 请求超时
- dataType 服务器返回格式
- data 发送请求数据
- beforeSend: function () {} 请求发起前调用
- success 成功响应后调用
- error 错误响应时调用
- complete 响应完成时调用（包括成功和失败）
- jQuery Ajax介绍
- http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
/*1.判断是否输入了手机号 提示 过*/
if(!phone){
$tip.html('请输入手机号').fadeIn(500).delay(1500).fadeOut(500);
return false;//没有必要往下执行时 可以直接用return false 结束程序
} -
$.ajax({//ajax的调用样式
type:'post',
url:'register.php',
data:dataArr,
dataType:'json',
timeout:2000,
beforeSend:function(){
$btn.addClass('disabled').val('正在提交...');
},
success:function(data){
console.log(data);
if(data.code == 10000){
$tip.html(data.msg).fadeIn(500).delay(1500).fadeOut(500);
}
},
error:function(){
$tip.html('服务器繁忙').fadeIn(500).delay(1500).fadeOut(500);
},
complete:function(){
$btn.removeClass('disabled').val('立即注册');
}
});
});
});