ajax相关知识点
Posted 云来云往
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax相关知识点相关的知识，希望对你有一定的参考价值。
AJAX的概念，即“Asynchronous javascript And XML”
通过在后台（浏览器的后台）与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面或者使用iframe。
AJAX写法
浏览器兼容
if(window.ActiveXObject){
//ActiveX是浏览器的插件
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE 678 OPEAR OLD
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();//NEW
}
状态码
readyState
XMLHttpRequest的准备状态，从0~4发生改变
0：请求未初始化
1：服务器连接已建立
2：请求已经接受
3：请求处理中
4：请求已完成，且响应已就绪
status
200：正常完成
404：未找到页面
500：服务器处理错误
ActiveX：就是IE浏览器提供的插件接口
例如：PDFReader ActiveX、FlashPlayer ActiveX、网上银行 ActiveX、XMLHTTP ActiveX
为什么响应有文本和XML格式
因为当下最流行的数据交互格式，一种是json（responseText）,另外一种是XML（responseXML）
* JSON.parse(xmlHttp.responseText)
数据格式：
XML：可扩展标记语言
html：超文本标记语言
JSON：基本上取代了ajax的responseXML格式
第一：文件更小
第二：json格式对于javascript更加友好
* JSON.parse(jsonString);
代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <div>账户余额：</div>
9 <b id="balance">0</b>
10 <button onclick="refreshBalance()">刷新余额</button>
11 <button onclick="loadDetails()">加载历史交易记录</button>
12 <div id="details"></div>
13 <script>
14 function refreshBalance(){
15 var xmlHttp;
16 if(window.ActiveXObject){//native code 系统自带的
17 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
18 }else if(window.XMLHttpRequest){
19 xmlHttp = new XMLHttpRequest();
20 }else{
21 throw new Error("您的浏览器暂时不支持AJAX，请升级或者更换浏览器");
22 }
23 xmlHttp.open("GET","balance.txt");
24 xmlHttp.onreadystatechange = function(){
25 if(xmlHttp.readyState==4&&xmlHttp.status==200){
26 document.getElementById("balance").innerHTML = xmlHttp.responseText;
27 }
28 }
29 //xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
30 xmlHttp.send(null);
31 }
32 function loadDetails(){
33 var xmlHttp;
34 if(window.ActiveXObject){//native code
35 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
36 }else if(window.XMLHttpRequest){
37 xmlHttp = new XMLHttpRequest();
38 }else{
39 throw new Error("您的浏览器暂时不支持AJAX，请升级或者更换浏览器");
40 }
41 xmlHttp.open("GET","details.xml");
42 xmlHttp.onreadystatechange = function(){
43 if(xmlHttp.readyState==4&&xmlHttp.status==200){
44 //document.getElementById("details").innerHTML = ;
45 console.log(xmlHttp.responseXML.root);
46 }
47 }
48 //xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
49 xmlHttp.send(null);
50 }
51 </script>
52 </body>
53 </html>
1 function showJsonp() {
2 var url=""
3 var word=encodeURI(\'H型支柱\');
4 $.ajax({
5 url:url,
6 type:\'post\',
7 data:{word:word,size:20},
8 dataType:\'jsonp\',
9 jsonp:\'a\',
10 jsonpCallback:"ss",
11 success:function (data) {
12 console.log(data)
13 }
14 })
15 }
参数：jsonp ：在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:\'onJsonPLoad\'}会导致将"onJsonPLoad=?"传给服务器。
jsonCallback: 是客户端注册的，获取 跨域服务器 上的json数据 后，回调的函数。
http://crossdomain.com/services.php?callback=jsonpCallback
这个 url 是跨域服务 器取 json 数据的接口，参数为回调函数的名字，返回的格式为
jsonpCallback({msg:\'this is json data\'})
以上是关于ajax相关知识点的主要内容，如果未能解决你的问题，请参考以下文章