细心一些可以发现，上面发送请求的数据中加入了一个随机数 t。因为有时服务器更新的了数据后，我们再一次执行 Ajax 请求不能显示新的结果，这是由于 js 为了加速，页面会使用缓存保持当前调用的相同链接。我们加了一个随机数以后，每次请求不同，浏览器就不会使用缓存数据了。
中文乱码问题返回的中文数据乱码是因为 js 页面和action页面中使用了不同的编码方式导致的。可以有以下2中方式解决(浏览器 html 文件是 urf-8 编码的):
1. 对请求数据字段进行2次 encodeURI 编码，服务器获取数据后做一次 UTF-8 转码
2. 对请求数据字段进行1次 encodeURI 编码，服务器获取数据后做一次 ISO-8859-1 转换 和一次 UTF-8 转码
tips: 考虑到兼容性，第1个方法更好
之前的代码并没有按兼容性的格式书写，不过 Ajax 的兼容也不难，主要表现在 XMLHTTPRequest对象获取环节:
var xhr; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); //chrome, safari, opera, firefox } else if(ActionXObject){ try{ xhr = new ActionXObject("Msxml2.XMLHTTP"); //IE 中 Msxml 插件 }catch(e){ xhr = new ActionXObject("Microsoft.XMLHTTP"); //IE } } GET和POST方式对比GET POST
后退/刷新 无害 数据会重新提交
书签 可藏为书签 无法藏为书签
缓存 可以缓存 不可以缓存
MIME类型 application/x-www-from-urlencode application/x-www-from-urlencode或 multipart/form-data (二进制为多重编码
历史记录 参数保留在历史记录中 参数不会留在历史记录
数据长度 URL最长2048个字符(2kB) 无限
数据类型 ASCII字符 无限
安全性 差 较
可见性 数据可见 数据不可见
跨域数据访问 JSONP这里需要强调的是，jsonp不属于Ajax的部分，它只是吧url放入script标签中实现的数据传输，主要优点是不受同源策略限制。由于一般库也会把它和Ajax封装在一起，所以这里放在一起讨论。下面是一个jsonp的例子（实现功能：输入手机号码查询归属地和运营商）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>兼容问题</title> </head> <body> <form> <input type="text" /> <input type="button" value="http://blog.csdn.net/faremax/article/details/search"/> <br/> </form> <div></div> </body> <script> function jsonpCallback(data) { document.getElementById('output').innerHTML = data.province + " " + data.catName; } document.getElementById('search').onclick = function(){ var num = document.getElementById('tel').value; if(/^1[34578]\d{9}$/.test(num)){ var url = "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=" + num + "t=" + Math.random() + "&callback=jsonpCallback"; var JSONP=document.createElement("script"); JSONP.type="text/javascript"; JSONP.src= ; document.getElementsByTagName("head")[0].appendChild(JSONP); } else { alert("您输入的手机号有误") } }; </script> </html>上述代码的全部js部分可以用jQuery实现，如下：
function jsonpCallback(data) { $('#output').text(data.province + " " + data.catName); } $('#search').click(function(){ var num = $('#tel').val(); if(/^1[34578]\d{9}$/.test(num)){ var url = "http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=" + num" + "t=" + Math.random(); $.ajax({ url: url, type: 'GET', dataType: 'JSONP', // 处理Ajax跨域问题(本质已不是Ajax) success: function(data){ $('#output').text(data.province + " " + data.catName); } }); } else { alert("您输入的手机号有误") } }); 其他 Ajax 参数及方法注：关于 xhr.status 可能的返回值，详见 http状态码
jQuery 中的 Ajax 方法 ajax 静态方法 $.ajax({options}) //发起一个 ajax 请求 options 常用以下属性设置：url, method("GET"http://www.itdadao.com/"POST"), crossDomain, accepts(可接受的类型), dataType, cache, contentType(编码格式), success, error等 $.ajaxSetup({options}); //options同上，设置 ajax 默认参数，不建议使用 $.post(url, data, success, datatype); //发起一个 POST 请求 data为传递参数(可选), success(reponseText, statusText, xhr) 为成功时的回调函数(可选), datatype(xml/html/script/json/jsonp/text,可选) $.get(url, data, success, datatype); //发起一个 GET 请求, 参数同上 $.getScript(url, data, success) //以 GET 请求获取一个 JS 文件并执行，参数含义同上 $.getJSON(url, data, success) //以 GET 请求获取一个 JSON 字符串，参数含义同上 ajax 动态方法 $().ajaxComplete(function(){}); //注册Ajax请求完成时要调用的处理程序 $().ajaxError(function(){}); //注册要在Ajax请求完成时遇到错误而调用的处理程序 $().ajaxSend(function(){}); //附加要在发送Ajax请求之前执行的函数 $().ajaxStart(function(){}); //注册在第一个Ajax请求开始时要调用的处理程序 $().ajaxStop(function(){}); //注册要在所有Ajax请求完成后调用的处理程序 $().ajaxSuccess(function(){}); //附加要在Ajax请求成功完成时执行的函数 $().load(url, data, callback); //返回某 url 的数据，data为传递参数(可选), callback(reponseText, statusText, xhr) 回调函数(可选) 其他相关方法 $.param(obj); //将对象转化为一个 url 参数列表 $(form).serialize(); //表单数据序列化为 url 参数列表 $(form).serializeArray(); //同上，但返回 JSON 串 简单封装 Ajax 相关方法
相关文章
精彩导读
热门资讯
关注我们
