Ajax
1.XMLHttpRequest对象
var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5 }
2.HTTP请求和响应
HTTP请求完整过程:
- 建立TCP连接
- 浏览器向Web服务器发送请求命令
- 浏览器发送请求头信息
- Web服务器应答
- Web服务器发送应答头信息
- Web服务器向浏览器发送数据
- Web服务器关闭TCP连接
HTTP请求的组成:
请求的方法或动作(GET或POST)、请求的URL、请求头(客户端环境和验证信息等)、请求体(请求正文)
HTTP响应的组成:
状态码(数字和文字组成)、响应头(服务器类型、日期时间、内容类型和长度等)、响应体
状态码(首字母定义了类型):
1xx:信息类、2xx:成功(200 OK)、3xx:重定向(304)、4xx客户端错误(404 NOT FOUND)、5xx:服务器错误(500)
XMLHttpRequest发送请求:
- open(method,url,async) //async默认值是true,即异步传输
- send(string)
xhr.open("GET","search.php",true); xhr.send();
xhr.open("POST","create.php",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send("name=小明&sex=男");
XMLHttpRequest取得响应:
- responseText属性:获取字符串形式的响应数据
- responseXML属性:获取XML形式的响应数据
- status属性和statusHeader():HTTP状态码
- getAllResponseHeader():获取所有的响应报头
- getResponseHeader():查询响应中的某个字段的值
- readyState属性:0:请求未初始化、1:服务器连接已建立,open已调用、2:请求已接收,接收到头信息、3:请求处理中,接收到响应主体、4:请求已完成
xhr.onreadystatechange = function(){ if( xhr.readyState==4&&xhr.status===200 ){ //xhr.requestText } }
实例:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Demo</title> <style> body, input, select, button, h1 { font-size: 28px; line-height:1.7; } </style> </head> <body> <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 id="staffSex"> <option>女</option> <option>男</option> </select><br> <label>请输入员工职位:</label> <input type="text" id="staffJob" /><br> <button id="save">保存</button> <p id="createResult"></p> <script> document.getElementById("search").onclick = function() { var request = new XMLHttpRequest(); request.open("GET", "server.php?number=" + document.getElementById("keyword").value); request.send(); request.onreadystatechange = function() { if (request.readyState===4) { if (request.status===200) { document.getElementById("searchResult").innerHTML = request.responseText; } else { alert("发生错误:" + request.status); } } } } document.getElementById("save").onclick = function() { var request = new XMLHttpRequest(); request.open("POST", "server.php"); var data = "name=" + document.getElementById("staffName").value + "&number=" + document.getElementById("staffNumber").value + "&sex=" + document.getElementById("staffSex").value + "&job=" + document.getElementById("staffJob").value; request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send(data); request.onreadystatechange = function() { if (request.readyState===4) { if (request.status===200) { document.getElementById("createResult").innerHTML = request.responseText; } else { alert("发生错误:" + request.status); } } } } </script> </body> </html>
3.JSON
数据格式:“名称”:“值对”
数值得类型:数字(整型和浮点数)、字符串(双引号)、逻辑值(true或false)、数组([])、对象({})、null
JSON解析:
- eval 危险,特别是执行第三方json数据时尽可能使用JSON.parse()方法
- JSON.parse 可捕捉JSON中的语法错误
var jsondata = '{"staff":[{"name":"一","age":"60"},{"name":"二","age":"40"},{"name":"三","age":"30"}]}'; var jsonobj = eval('('+jsondata+')'); var jsonobj = JSON.parse(jsondata); //jsonobj.staff[0].name
检查json语法错误的网站:jsonlint.com
4.jquery实现ajax
jQuery.ajax([settings])
- type:类型,"POST"、"GET"
- url:发送请求的地址
- data:一个对象,连同请求发送到服务器的数据
- dataType:预期服务器返回的数据类型,例如"json"、"jsonp",可不指定
- success:请求成功后的回调函数,传入返回后的数据,以及包含成功代码的字符串
- error:请求失败时调用,传入XMLHttpRequest对象
$(document).ready(function(){ $("#search").click(function(){ $.ajax({ type: "GET", url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(), dataType: "json", success: function(data) { if (data.success) { $("#searchResult").html(data.msg); } else { $("#searchResult").html("出现错误:" + data.msg); } }, error: function(jqXHR){ alert("发生错误:" + jqXHR.status); }, }); }); $("#save").click(function(){ $.ajax({ type: "POST", url: "serverjson.php", data: { name: $("#staffName").val(), number: $("#staffNumber").val(), sex: $("#staffSex").val(), job: $("#staffJob").val() }, dataType: "json", success: function(data){ if (data.success) { $("#createResult").html(data.msg); } else { $("#createResult").html("出现错误:" + data.msg); } }, error: function(jqXHR){ alert("发生错误:" + jqXHR.status); }, }); }); });
5.跨域
一个域名地址组成: http:// www . abc.com : 8080 / scripts/jquery.js
协议 子域名 主域名 端口号 请求资源地址
当协议、子域名、主域名、端口号中任意一个不相同时,都算不同域。不同域之间相互请求资源就叫跨域。
JavaScript出于安全的考虑,不允许跨域调用其他页面的对象,即受JavaScript的同源策略的限制。
处理跨域的方法:
- 代理:通过在同域名的web服务器端创建一个代理。比如在北京的服务器后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shanghai.com/seivice.php)的服务,然后再把响应结果返回给前端,这样前端调用北京同域名的服务就和调用上海的服务效果相同了。
- JSONP:Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)。JSONP非正式传输协议,允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
<script type="text/javascript"> // 得到航班信息查询结果后的回调函数 var flightHandler = function(data){ alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。'); }; // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码) var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; // 创建script标签,设置其属性 var script = document.createElement('script'); script.setAttribute('src', url); // 把script标签加入head,此时调用开始 document.getElementsByTagName('head')[0].appendChild(script); </script>
//服务器很聪明,这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html(服务端的实现这里就不演示了,与你选用的语言无关,说到底就是拼接字符串): flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 });
<script type="text/javascript"> jQuery(document).ready(function(){ $.ajax({ type: "get", async: false, url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 success: function(json){ alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。'); }, error: function(){ alert('fail'); } }); }) </script>
- XHR2:HTML5提供的XMLHttpRequest Level2已实现了跨域访问以及一些其他新功能。(CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求) 在服务端做一些小小的改造:
-
- header('Access-Control-Allow-Origin:*');
- header('Access-Control-Allow-Methods:POST,GET');
设置的header为“*”,任意一个请求过来之后服务端我们都可以进行处理&响应。
cors在移动终端支持的不错,可以考虑在移动端全面尝试;PC上有不兼容和没有完美支持,所以小心踩坑。jsonp是get形式,承载的信息量有限,所以信息量较大时cors是不二选择。
参考:慕课网-Ajax全接触http://www.imooc.com/learn/250
AJAX POST&跨域 解决方案 - CORS http://www.cnblogs.com/Darren_code/p/cors.html
说说JSON和JSONP,也许你会豁然开朗 http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html