Ajax详解
Ajax
Ajax 是什么
- Asynchronous [e'sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
- 异步 : 某段程序执行时不会阻塞其他程序的执行, 表现形式是程序的执行顺序不依赖程序本身的书写顺序, 相反的情况依次执行, 那就是同步核心在于不会阻塞程序的执行, 从而提升整体执行效率
原生 Ajax 的使用
XMLHttpRequest
- XMLHttpRequest 是浏览器的内置对象, 作用是在后台与服务器通信( 交换数据 )
- 用于网页的局部更新, 而不是刷新整个页面
// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();请求 Request
HTTP 请求由 3 个部分组成, 正好和 XMLHttpRequest 相对应
-
请求行 open
xhr.open( 'post', '01.php' ); -
请求头 setRequestHeader
// post 请求需要设置头 xhr.setRequestHeader( 'Conent-Type' , 'application/x-www-form-urlencoed' ); // get 请求可以不设置请求头 -
请求主体 send
xhr.send( 'name=Jim&age=18' ); // get 可以传空, 因为在头的时候已经传过数据了
响应 Response
- HTTP 响应是由服务端放出的, 客户端更应该关心度额是响应的结果
- HTTP 响应由 3 个部分组成, 与 XMLHttpRequest 的方法或属性成对应关系
- 由于服务器做出响应需要时间( 网络延迟等原因 ),所以需要监听服务器响应状态, 再进行处理
if( xhr.readyState == 4 && xhr.status == 200 ){
// 进行下一步操作, 如渲染页面
document.querySelector( '#result' ).innerHTML = xhr.responseText;
}步骤分析
- 请求未初始化 ( 还没有调用 open() )
- 请求已经建立, 但是还没有发送 ( 还没有调用send() )
- 请求已发送, 正在处理中 ( 通常现在可以从相应中获取内容头 )
- 请求在才处理中 , 通常响应中已经有部分数据可以用了, 但是服务器还没有完全完成响应
- 响应已经完成, 可以获取并使用服务器的响应了
其他注意点
- 可以使用 onreadystatechange 来监听 XMLHttpRequest 的状态
-
获取行状态 ( 包括行状态码和状态信息 )
xhr.status // 状态码 xhr.statusText // 状态码嘻嘻 -
获取响应头
xhr.getResponseHeader( 'Content-Type' ); xhr.getAllResponseHeaders(); -
获取响应主体
xhr.responseText // json, 文本 类型 xhr.responseXML // xml 类型
API 详解
xhr.open()发送请求, 可以是 get 或者 post 方式xhr.setRequestHeader()设置请求头xhr.send()发送请求主体, 如果是 get 方式使用xhr.send(null), 因为在 open 中已经发送了请求主体xhr.onreadystatechange = functtion(){}监听响应状态xhr.status表示响应码, 如 200 表示成功xhr.statusText表示响应信息. 如 okxhr.getAllResponseHeaders()获取全部响应头信息xhr.getResponseHeader( 'key' )获取指定响应头信息xhr.reponseText xhr.responseXML都表示响应主体, 格式不同
get 和 post 的差异
- get 没有请求主体, 使用
xhr.send(null)发送请求主体 - get 可以通过请求 url 上添加请求函数
- post 可以通过
xhr.send( 'name=itcast&age=10' )发送请求主体 - post 需要设置
- get 性能高( 基本上获取内容都是使用get )
- get 大小限制约 4kb, post 则没有限制
get 方式的 请求响应
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);
}
}
post 请求和响应
//初始化
var xhr = new XMLHttpRequest();
//请求行
xhr.open("post","03 AjaxPost.php");
//请求头
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
//请求内容
xhr.send("username=rxt&password=1234");
//监听响应改变
xhr.onreadystatechange = function(){
/*什么时候才算是http通讯结束 在readyState=4的是 响应完成*/
/*什么是才算是通讯成 status 200 */
if(xhr.status ==200 && xhr.readyState == 4){
document.querySelector("div").innerHTML = xhr.responseText;
}
}
XML
-
XML 是可扩展标记语言（Extensible Markup Language）的缩写，其中的 标记（markup）是关键部分。XML 可以创建内容，然后使用限定标记标记它，从而使每个单词、短语或块成为可识别、可分类的信息。您创建的文件，或文档实例 由元素（标记）和内容构成。
- 特点
- 必须要有根元素
- 不能以空格, 数字或者 . 开头, 对大小写敏感
- 不能交叉嵌套
- 属性双引号
- 特殊符号要使用尸体
- 注释和 HTML 一样
- 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>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
JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取
- php 方法
- json_encode() : 将 php 数组转化为 json 字符
-
json_decode() : 将 json 字符串 转换为 php 数组
<?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>'; ?>javascript 解析方法
- JSON对象
- JSON.parse() : 字符串 转 JSON 对象
- JSON.stringify() : JSON 对象 转 字符串
-
JSON 兼容处理 : json2.js
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);
}
}封装 Ajax 工具函数
/*
* 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'){
return false;
}
/*请求的类型*/
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字符串*/
else if(contentType.indexOf('json') > -1){
/*转化json对象*/
data = JSON.parse(xhr.responseText);
}
/*否则的话他就是字符串*/
else{
data = xhr.responseText;
}
/*回调 成功处理函数*/
options.success && options.success(data);
}
/*计时请求xhr.status不成功 他也需要的响应完成才认作是一个错误的请求*/
else if(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);
}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
jQuery 中 Ajax 的使用;
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {
username:$("#username").val(), content:$("#content").val()
},
dataType: "json",
success: function(data){
$('#resText').empty(); //清空resText里面的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}
});
});
});
