Ajax详解
来源:互联网 发布:caffe bias term false 编辑:程序博客网 时间:2024/05/18 16:38
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 的使用
$.ajax({ type : 'get', url : 'getCode.php', data : {'mobile' : phone}, dataType : 'json', beforeSend : function(){ }, success : function(info){ }});
模板引擎
artTemplate 简洁语法模板
// 简洁语法 {{if admin}} {{include 'admin_content'}} {{each list}} <div>{{$index}}. {{$value.user}}</div> {{/each}} {{/if}}
// 编写模板 <script id="test" type="text/html"> <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引 {{i + 1}} :{{value}}</li> {{/each}} </ul> </script>
// 渲染数据 var data = { title: '标签', list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var html = template('test', data); document.getElementById('content').innerHTML = html;
artTemplate js 原生语法模板
// 模板 js 原生语法 <h1><%=title%></h1> <ul> <%for(i = 0; i < list.length; i ++) {%> <li>条目内容 <%=i + 1%> :<%=list[i]%></li> <%}%> </ul> <% 与 %> 符号包裹起来的语句则为模板的逻辑表达式。 对内容编码输出:<%=content%> 不编码输出:<%=#content%>
同源跨域
- 同源
- 同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。
- 跨域
- http://api.example.com/detail.html 不同源 域名不同
- https//www.example.com/detail.html 不同源 协议不同
- http://www.example.com:8080/detail.html 不同源 端口不同
- http://api.example.com:8080/detail.html 不同源 域名、端口不同
- https://api.example.com/detail.html 不同源 协议、域名不同
- https://www.example.com:8080/detail.html 不同源 端口、协议不同
- http://www.example.com/detail/index.html 同源 只是目录不同
- 跨域方案
- 顶级域名相同的可以通过domain.name来解决,即同时设置 domain.name = 顶级域名(如example.com)
- document.domain + iframe
- window.name + iframe
- location.hash + iframe
- window.postMessage()
- jsonp
- json with padding
- 原理
- 其本质是利用了标签具有可跨域的特性, 由服务端返回一个预先定义好的Javascript函数的调用,并且将服务器数据以该函数参数的形式传递过来, 此方法需要前后端配合完成。
<!-- 当我们用script标签去加载的时候 会把内容解析成js去执行 --> <script> function fuc(data){ console.log(data.name); } </script> <script src="http://www.guangzhou.com/api.php?callback=fuc"></script>
jQuery 中的 Ajax
- url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
- type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
- timeout: 要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。
- async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
- cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。设置为false将不会从浏览器缓存中加载请求信息。
- data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如
{foo1:"bar1",foo2:"bar2"}
转换为&foo1=bar1&foo2=bar2
。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。 - dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。
- 可用的类型如下:
- xml:返回XML文档,可用JQuery处理。
- html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
- script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
- json:返回JSON数据。
- jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
- text:返回纯文本字符串。
- beforeSend:要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 }
- complete:要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。
- 参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 }
- 参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
- success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
- 由服务器返回,并根据dataType参数进行处理后的数据。
- 描述状态的字符串。
function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //调用本次ajax请求时传递的options参数
- error:要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
ajax事件函数如下:function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }
- contentType:要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
- dataFilter:要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function(data, type){ //返回处理后的数据 return data; }
- global:要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。
- ifModified:要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。
- jsonp:要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如
{jsonp:'onJsonPLoad'}
会导致将"onJsonPLoad=?"
传给服务器。 - username:要求为String类型的参数,用于响应HTTP访问认证请求的用户名。
- password:要求为String类型的参数,用于响应HTTP访问认证请求的密码。
- processData:要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。
- scriptCharset:要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
案例代码:
$(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); } }); });});
阅读全文
0 0
- ajax开发:ajax详解
- ajax 详解
- Ajax详解
- ajax详解
- ajax详解
- Ajax详解
- AJAX 详解
- Ajax详解
- ajax 详解
- AJAX详解
- AJAX详解
- Ajax详解
- AJAX详解
- Ajax详解
- AJAX详解
- ajax详解
- Ajax详解
- AJAX详解
- Maven常用命令
- unity 一些小笔记 持续更新
- picasso图片框架源码解析
- js取一定范围内的随机整数
- Could not determine current working directory
- Ajax详解
- 深入理解linux内核之文件系统分析二
- 2017中国(上海)国际城市地下综合管廊产业展览会暨主题论坛会刊(参展商名录)
- Spring Aware 接口介绍
- js获取地址栏上的参数
- 微服务MySQL分库分表数据到MongoDB同步方案
- Mobile API for 蓝牙(android/IOS/windows)
- 判断select下拉框是否有选,并给下拉框赋值
- H.264相关-1