标签：pre ext read ade label 状态 set 冒号 动态
全称：Asynchronous JavaScript and XML (异步的JavaScript和XML)
不是某种编程语言，是一种在无需重新加载整个网页的情况下能够更新部分网页的技术，异步更新，局部更新；后台和服务器交换数据，通过XMLHttpRequest对象
流程：运用HTML和CSS实现页面，表达信息；运用XMLHttpRequest和web服务器进行数据的异步交换；运用JavaScript操作DOM，实现动态局部刷新
XMLHttpRequest对象：
var request; if (window.XMLHttpRequest){ request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l }else{ request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5 }
HTTP:
是计算机通过网络进行通信的规则，是一种无状态（不建立持久的连接，没有记忆）协议
一个完整的HTTP请求，7个步骤：1：建立TCP连接；2：Web浏览器向Web服务器发送请求命令；3.浏览器发送请求头信息；4.服务器应答；5.服务器发送应答头信息；6.服务器向浏览器发送数据；7.服务器关闭TCP连接
一个HTTP请求一般由四部分组成：1.请求的方法或动作（GET还是POST)；2.请求的URL（请求的地址）；3.请求头，包含一些客户端环境信息，身份证信息等
4.请求体（请求正文），可以包含客户提交的查询字符串信息，表单信息等
GET：一般用于信息获取，使用URL传递参数（发送的信息对任何人都可见，所有的变量名和值都显示在URL中），对所发送信息的数量也有限制，一般在2000字符；幂等（一个GET请求执行一次和一万次的效果是相同的）；
POST：一般用于修改服务器上的资源，对所发送信息的数量无限制，更安全
HTTP相应一般由三部分组成：1.一个数字和文字组成的状态码，用来显示请求是否成功；2.响应头，也和请求头一样包含许多有用的信息，例如服务器类型，日期和时间，内容类型和长度等；3.响应体，也就是响应正文
HTTP状态码（request.status）：由3位数字构成，其中首位数字定义了状态码的类型
1XX：信息类，表示收到web浏览器请求，正在进一步的处理中
2XX：成功，表示用户请求被正确接收，理解和处理例如：200 OK
3xx:重定向，表示请求没有成功，客户必须采取进一步的动作
4XX:客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found,意味着请求中所引用的文档不存在。
5xx：服务器错误，表示服务器不能完成请求的处理
XMLHttpRequest发送请求：
open(method,url,async)
send(string)
例子：
request.open("GET","get.php",true);
request.send();
request.open("POST","post.php",true);
request.send();
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=王二狗&sex=男");
XMLHttpRequest取得响应：
responseText:获得字符串形式的响应数据
responseXML:获得XML形式的响应数据
status和statusText:以数字和文本形式返回HTTP状态码
getAllResponseHeader():获取所有的响应报头
getResponseHeader():查询响应中的某个字段的值
readyState属性：(通过request.onreadystatechange来监听)
0：请求未初始化，open还没有调用
1：服务器连接已经建立，open已经调用了
2：请求已经接收，也就是接收到头信息了
3：请求处理中，也就是接收到响应主体了
4：请求已完成，且响应已就绪，也就是响应完成了
var request; if (window.XMLHttpRequest){ request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l }else{ request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5 } request.open("GET","get.php",true); request.send(); request.onreadystatechange = function(){ if (request.readyState === 4 && request.status === 200){ //做一些事情 request.responseText } }
Demo:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Demo</title> 6 <style> 7 #box{ 8 line-height: 1.8; 9 margin: 10px auto; 10 width: 350px; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="box"> 16 <h1>员工查询</h1> 17 <label>请输入员工编号：</label> 18 <input type="text" id="keyword"/> 19 <button id="search">查询</button> 20 <p id="searchResult"></p> 21 22 <h1>员工查询</h1> 23 <label>请输入员工姓名：</label> 24 <input type="text" id="staffName"/><br> 25 <label>请输入员工编号：</label> 26 <input type="text" id="staffNumber"/><br> 27 <label>请输入员工性别：</label> 28 <select name="" id="staffSex"> 29 <option value="">男</option> 30 <option value="">女</option> 31 32 </select><br> 33 <label>请输入员工职位：</label> 34 <input type="text" id="staffJob"/><br> 35 <button id="save">保存</button> 36 <p id="createResult"></p> 37 38 </div> 39 40 <script type="text/javascript"> 41 document.getElementById("search").onclick = function(){ 42 //发送Ajax查询请求处理 43 var request; 44 if (window.XMLHttpRequest){ 45 request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l 46 }else{ 47 request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5 48 } 49 request.open("GET","service.php?number="+document.getElementById("keyword").value); 50 request.send(); 51 request.onreadystatechange = function(){ 52 if(request.readyState===4){ 53 if(request.status===200){ 54 var data = JSON.parse(request.responseText); 55 if(data.success){ 56 document.getElementById("searchResult").innerHTML=data.msg; 57 }else{ 58 document.getElementById("searchResult").innerHTML="出现错误：" + data.msg; 59 } 60 }else{ 61 alert("发生错误："+request.status); 62 } 63 } 64 } 65 } 66 67 document.getElementById("save").onclick = function(){ 68 //发送Ajax查询请求处理 69 var request; 70 if (window.XMLHttpRequest){ 71 request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l 72 }else{ 73 request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5 74 } 75 request.open("POST","service.php"); 76 var data = "name=" +document.getElementById("staffName").value 77 +"&number=" +document.getElementById("staffNumber").value 78 +"&sex=" +document.getElementById("staffSex").value 79 +"&job=" +document.getElementById("staffJob").value; 80 request.serRequestHeader("Content-Type","application/x-www-form-urlencoded"); 81 request.send(data); 82 request.onreadystatechange = function(){ 83 if(request.readyState===4){ 84 if(request.status===200){ 85 var data = JSON.parse(request.responseText); 86 if(data.success){ 87 document.getElementById("creatResult").innerHTML=data.msg; 88 }else{ 89 document.getElementById("creatResult").innerHTML="出现错误：" + data.msg; 90 } 91 }else{ 92 alert("发生错误："+request.status); 93 } 94 } 95 } 96 } 97 98 99 /*var jsondata = ‘{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}‘ 100 var jsonobj = eval(‘(‘+ jsondata + ‘)‘); 101 alert(jsonobj.staff[0].name); 102 103 var jsondata = ‘{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}‘ 104 var jsonobj = JSON.parse(jsondata); 105 alert(jsonobj.staff[0].name);*/ 106 107 </script> 108 109 </body> 110 </html>
JSON:JavaScript对象表示法（JavaScript Object Notation);JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成；JSON是独立于语言的，也就是说不管什么语言，都可以解析JSON，只要按照JSON的规则来就行。
相比XML的有点：JSON的长度更短小，读写速度更快，可以使用JavaScript内建的方法直接进行解析，转换成JavaScript对象，非常方便
JSON数据的书写格式：名称/值对；名称写在前面（在双引号中），值对写在后面（同样的双引号中），中间用冒号隔开 例如："name":"郭靖"
JSON的值可以是下面这些类型：数字（整数或浮点数）；字符串（在双引号中）；逻辑值（true或false);数组（在方括号中）；对象（在花括号中）；null;
JSON例子：
{ "staff":[ {"name":"洪七","age":70}, {"name":"郭靖","age":35}, {"name":"黄蓉","age":30} ] }
JSON解析：eval和JSON.parse
在代码中使用eval是很危险的！特别是用它执行第三方的JSON数据（其中可能包含恶意代码）时，尽可能使用JSON.parse()方法解析字符串本身，该方法还可以捕捉JSON中的语法错误。
var jsondata = ‘{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}‘ var jsonobj = eval(‘(‘+ jsondata + ‘)‘); alert(jsonobj.staff[0].name); var jsondata = ‘{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}‘ var jsonobj = JSON.parse(jsondata); alert(jsonobj.staff[0].name);
在线的JSON字符串校验：JSONLint.com
使用JSON的Demo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <style> #box{ line-height: 1.8; margin: 10px auto; width: 350px; } </style> </head> <body> <div id="box"> <h1>员工查询</h1> <label>请输入员工编号：</label> <input type="text" id="keyword"/> <button id="search">查询</button> <p id="searchResult"></p> <h1>员工查询</h1> <label>请输入员工姓名：</label> <input type="text" id="staffName"/><br> <label>请输入员工编号：</label> <input type="text" id="staffNumber"/><br> <label>请输入员工性别：</label> <select name="" id="staffSex"> <option value="">男</option> <option value="">女</option> </select><br> <label>请输入员工职位：</label> <input type="text" id="staffJob"/><br> <button id="save">保存</button> <p id="createResult"></p> </div> <script type="text/javascript"> document.getElementById("search").onclick = function(){ //发送Ajax查询请求处理 var request; if (window.XMLHttpRequest){ request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l }else{ request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5 } request.open("GET","service.php?number="+document.getElementById("keyword").value); request.send(); request.onreadystatechange = function(){ if(request.readyState===4){ if(request.status===200){ var data = JSON.parse(request.responseText); if(data.success){ document.getElementById("searchResult").innerHTML=data.msg; }else{ document.getElementById("searchResult").innerHTML="出现错误：" + data.msg; } }else{ alert("发生错误："+request.status); } } } } document.getElementById("save").onclick = function(){ //发送Ajax查询请求处理 var request; if (window.XMLHttpRequest){ request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l }else{ request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5 } request.open("POST","service.php"); var data = "name=" +document.getElementById("staffName").value +"&number=" +document.getElementById("staffNumber").value +"&sex=" +document.getElementById("staffSex").value +"&job=" +document.getElementById("staffJob").value; request.serRequestHeader("Content-Type","application/x-www-form-urlencoded"); request.send(data); request.onreadystatechange = function(){ if(request.readyState===4){ if(request.status===200){ var data = JSON.parse(request.responseText); if(data.success){ document.getElementById("creatResult").innerHTML=data.msg; }else{ document.getElementById("creatResult").innerHTML="出现错误：" + data.msg; } }else{ alert("发生错误："+request.status); } } } } /*var jsondata = ‘{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}‘ var jsonobj = eval(‘(‘+ jsondata + ‘)‘); alert(jsonobj.staff[0].name); var jsondata = ‘{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黄蓉","age":30}]}‘ var jsonobj = JSON.parse(jsondata); alert(jsonobj.staff[0].name);*/ </script> </body> </html>
标签：pre ext read ade label 状态 set 冒号 动态
原文地址：http://www.cnblogs.com/Hale-Proh/p/6932981.html
