一, 什么是 AJAX
Ajax(Asynchronous JavaScript and XML), 可以理解为 JavaScript 执行异步网络请求. 通俗的理解的话就是, 如果没有 Ajax 技术, 改变网页的一小部分 (哪怕是一行文字, 一张图片) 都需要重新加载一次整个页面, 而有了 Ajax 之后, 就可以实现在网页不跳转不刷新的情况下, 在网页后台提交数据, 部分更新页面内容.
二, AJAX 的原声写法
1.XMLHttpRequest 对象
XMLHttpRequest 对象用于在后台与服务器交换数据, 能够在不重新加载页面的情况下更新网页, 在页面已加载后从服务器请求数据, 在页面已加载后从
服务器接收数据, 在后台向服务器发送数据. 所以 XMLHttpRequest 对象是 Ajax 技术的核心所在.
2. 实现流程
创建 XMLHttpRequest 对象 -->打开请求地址, 初始化数据 -->发送请求数据 -->监听回调函数状态 -->收到服务器返回的应答结果.
废话不多说, 直接上代码
[code=javascript,ajax 代码]var xmlhttp;
- :
- function loadXMLDoc(url) {
- xmlhttp = null;
- if (window.XMLHttpRequest){
- //code for all new beowsers
- xmlhttp = new XMLHttpRequest();//here is creat XMLHttpRequest object
- } else if (window.ActiveXObject){
- //code for IE5 and IE6
- xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- if (xmlhttp){
- xmlhttp.open("GET",url,true); //request mode and request address
- xmlhttp.send(null); //send request
- xmlhttp.onreadystatechange = state_Change; //monitor callback fun
- } else {
- alert("Your browser dose not support XMLHTTP");
- }
- }
- // statr_Change callback function
- function state_Change() {
- if(xmlhttp.readyState == 4&&xmlhttp.status == 200) {
- // to hide these two conditions is to express the succ of the request 4 = "loaded", 200 = OK
- var data = xmlhttp.responseText;
- } else {
- alert("Problem resrieving XML data");
- }
- }
3. 原声写法中的注意点
(1).open()的第三个参数中使用了 "true", 该参数规定请求是否异步处理, 默认是异步.
true 表示脚本会在 send()方法之后继续执行, 而不等来自服务器的相应.
(2). 关于 readyState
(3). 关于 status 由服务器返回的 HTTP 状态代码, 200 表示成功, 404 表示 "Not Found" 错误. 当 readyState 小于 3 的 时候读取这一属性会导致一个异常.(后面有 http 状态码详细解读)
Jquery 中的 AJAX
Jquery 对原声 Ajax 做了很好的封装, 使用起来非常非常的月贴(舒服), 比如 $ajax,$get,$post,$getjson 等根据不用需要进行调用, 写法简洁明了, 但是为兼顾哥哥方法在这里我以一个通用的方法 $ajax 为例做一个简单的分析, 按照下面的模式写好各个参数, 就能成功进行 Ajax 请求了, 可能在实际中使用 $POST,$GET 这两个方法比较多, 废话少说, 看下面代码如何用 jquery 写 ajax:
**jquery 中的 ajax**
- $.ajax({
- type:'', // Request mode: get or post
- url:'', //request url
- async:"", // Whether to support asynchronous refresh,default true
- data:"", // need submit data
- dataType:"", //the type if data retured bt the server
- success:function(data){
- //the callback function after the request,data is by the sercer returned
- },
- error:function(data){
- //the callback function is error,
- }
- })
四, GET or POST?
作为 Ajax 最常用的两种数据提交方式, GET 和 POST 有着自己的特点和使用场景, 正确区分 GET 和 POST 的不同根据实际需求进行选用在开发中十分重要, 简单是关键!!!
想了解 GET 和 POST 的比较, 请看下面的图:
从表格中嘚溜 (拿出) 的关键点:
1. 传递数据的方式不同: get 是直接把请求数据放在 url 的后面, 是可见的, post 的请求数据不会显示在 url 中, 是不可见得.
2. 数据长度和数据类型的差异: get 有数据长度的限制, 且数据类型只允许 ASCII(ASCII 是英文 American Standard Code for Information Interchange 的缩写. ASCII 码是目前计算机最通用的编码标准, 方便网站站长程序猿 ASCII 码查询)字符, post 在这两方面都没有限制.
3. 安全性的差异: get 不安全, post 更安全.(废话, 一个安全, 一个不安全)
由此得出两者使用的场景:
get 使用方便, 使用于页面之间非敏感数据的简单传值, post 使用较为安全, 适用于向服务器发送密码, token 等敏感数据.
五, success 和 complete 区别
Jquery 封装的 Ajax 回调函数中, success,error,complete 是最常用的三个, 其中, success 和 error 很好的区别, 一个是请求成功回调用的, 另一个是请求失败用的, 从字上面就可以 so ease 的理解, 但是 success 和 complete 容易混淆, 所以这里我做了一个特别说明:
success: 请求成功后回调函数,(我只有在成功后出来).
complete: 请求完成后回调函数(不管成功失败, 我都会出来的).
请注意括号里面的, 没错区别就在于括号里面的, 也就是说调用的 success 一定会调用 complete, 但是调用 comlaete 不一定会调用 success.(状态码 404,403,301,302... 都会进入到 complete, 只要没毛病就会调用)
六, XML -> JSON
Ajax 中的 "x" 就是 XML.
xml: 可扩展标记语言, 标准通用标记语言的子集, 是一种用于标记电子文件使用其具有结构标记语言.
xml 作为一种数据交互格式, 广泛用字啊计算机领域, 然而, 随着 json 的发展, json 以其明显的有事已经 "贱贱" 的取代了 xml 成为现在数据交互的格式标准, 所以在这里, 想强调的是, json 现在是主流的! 主流的! 主流的! 交互格式, 前后端的交互标准, 无论是前端提交后台的数据, 还是后台返回给前端的数据, 都最好统一成 json 格式.
七, jquery 中封装的 ajax 方法使用
.ajaxComplete()------------- 请求完成时
.ajaxError()----------- 请求失败时
.ajaxSend()------------- 在 Ajax 请求发送时附加一个 function 去执行
.ajaxStart()----------- 请求开始时
.ajaxStop()---------- 请求 结束时
.ajaxSuccess()-------------- 请求成功时
.load()--------------- 从服务器加载数据并将返回的 html 替换到选择的元素中
.Jquery.post()----------- 使用 HTTP POST 请求加载服务器端数据
.serialize()------------ 将 from 元素集编码成一个字符串以便提交
.serializeArray()--------------- 将 from 元素集编码成一个键值对的数组或对象
.Jquery.param()----------------- 创建一个序列化的数组或对象, 使得适用于一个 URL 查询字符串或者 AJax 请求
.Jquery.getScript()---------------- 从服务器端加载一个 js 文件, 然后执行它
.Jquery.getJSON()--------------- 从服务器端加载用 json 编码过得数据
.Jquery.get()----------- 从服务器加载数据简单说其中亮点
------------------------------------------------------------------------------------- 直接上代码 --------------------------------------------------------------------------------------------
[code=javascript,ajaxstart 和 ajaxstop]<!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <script type="text/javascript" src="test/jquery.js"></script>
- </head>
- <body>
- <div class="trigger">trigger</div>
- <div class="result"></div>
- <div class="log1"></div>
- <div class="log2"></div>
- </body>
- <script type="text/javascript">
- $(document).ready(function(){ // 在此就不写注释了, 字面上都是可以看懂的 嘻嘻
- $('.log1').ajaxStart(function(){
- $(this).text('start handler');
- });
- $('.log2').ajaxStop(function(){
- $(this).text("ajax stop");
- });
- $('.trigger').click(function(){
- $('.result').load('xxxx.html')
- })
- })
- </script>
- </html>
如果您喜欢或者巴拉巴拉一大堆, 那你就点个赞如何!!!
来源: http://www.qdfuns.com/article/48119/35c00cdce1abcec948fc80f6f8ac3676.html