学习目录：AJAX基础知识AJAXinPHP和AJAXJSON格式jQuery个人网站原链接地址：Weaknesses欢迎留言...转...1.AJAX基础知识（1）)AJAX（AsynchronousJavaScriptandXML）：异步javascript和xml的缩写。(2)AJAX不是一种编程语言，而是一种无需加载整个页面即可更新网页部分内容的技术。(3)传统网页的缺点：需要更新内容或提交表单，需要重新加载整个页面；使用AJAX的优点：通过在后台与服务器进行少量数据交换，网页可以实现异步局部更新。它在填写复杂表格时具有非常好的用户体验。(4)AJAX同步与异步：同步说白了就是加载整个页面；异步可以加载页面的一部分。具体来说，客户端和服务器之间的连接。在Ajax技术出现之前，数据是同步交换的，填写比较复杂的表格会很麻烦。有了XMLHttpRequest对象，同步世界变成了异步世界。后台可以通过XMLHttpRequest对象与服务端进行数据交换。(5)XMLHttpRequest对象创建：varrequest=newXMLHttpRequest();直接实例化对象即可！注意：IE5和IE6不支持此定义，如果想实现浏览器页面兼容，如下代码所示：varrequest;if(window.XMLHttpRequest){request=newXMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari...}else{request=newActiveObject("Microsoft.XMLHTTP");//IE6,IE5}(6)HTTP请求：http是无状态协议：说白了就是不能建立持久连接，没有内存的协议。进一步：通过页面请求和响应的过程，实现网页调试。(6.1)一个完整的HTTP请求过程通常有以下七个步骤：建立TCP连接Web浏览器向Web服务器发送请求命令Web浏览器发送请求头信息Web服务器回复Web服务器发送响应头信息Web服务器发送响应头信息向浏览器发送数据Web服务器关闭TCP连接（6.2）HTTP请求一般由四部分组成：HTTP请求方法或动作，比如GET或POST请求URL被请求，你必须知道请求的地址是什么请求头，包括一些clients端环境信息、身份验证信息等请求体，即请求文本，可以包含客户提交的查询支付信息、表单信息等。(6.3)GET和POST【收集来自method="post/get"表单中的name值】说白了就是收集表单传递过来的值。传递的值，一个以url的形式显示（不安全），一个以value的形式显示（安全）；GET一般用于获取信息，使用url传递参数，限制2000个字符，为大家可见，不安全。POST一般用于表单发送数据，参数在http请求体中，发送信息数量没有限制。(6.4)Http响应一般由三部分组成：一个由数字和文本组成的状态码，用来表示请求是成功还是失败；响应头，包括服务器类型、日期和时间、内容类型和长度等；响应正文，即响应文本。(6.5)Http状态码由三位数字组成，第一位定义了状态码的类型：1XX：信息，表示网页浏览器请求已收到，正在进一步处理；2XX：成功，表示用户请求正确接收，理解并处理，例如：200OK3XX：重定向，表示请求不成功，客户端必须采取进一步的操作4XX：客户端错误，表示请求已提交客户端报错，比如404NOTFOUND，意思是请求引用的文档不存在。5XX：服务器错误，表示服务器无法完成对请求的处理。(7)XMLHttpRequest发送请求：(objectmethod)open(method请求方法,url请求地址,async请求同步还是异步（异步为true，同步为false，其实默认为true））;///调用异步requestsend(string);(使用get方法时，参数可以不填或为空，因为地址栏url中包含信息；使用post时，必须填写);//发送请求给服务器举个栗子：request.open("POST","create.php",true);request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置http的header信息，告诉web服务器发送一个Form；注意：setRequest请求必须放在open和send之间，否则会抛异常request.send("name=WangDahammer&sex=male");(8)XMLHttpRequestgetsaresponse:(对象的方法和属性)responseText:简单来说：就是接收服务器响应返回的数据。获取相应的数据作为字符串。responsesXML：获取对应的XML形式的数据。现在一般都是转为JSON形式的数据。status和statusText：以数字和文本形式返回http状态代码。getAllResponseHeader()：获取所有的响应头。getResponseHeader()：查询响应中某个字段的值。readyState属性：当响应成功返回时得到通知。0：请求未初始化，尚未调用open。1：服务器连接已经建立，open已经被调用。2：请求已接收，即接收到头信息。3：正在处理请求，即已经收到响应体。4：requesthasbeencompletedandresponseready，即响应完成。举个栗子：涵盖了ajax的大部分内容（xhr构建ajax的典型流程）varrequest=newXMLHttpRequest();//创建XHR对象request.open("GET","get.php",true);//调用异步请求request.send();//发送异步请求//监听事件判断服务器是否正确响应request.onreadystatechange=function(){if(request.readyState===4&&request.status===200){request.reponseText;//接收服务器响应返回的数据}}2、PHP与AJAX实战：【服务端与客户端】实现查询员工和创建新员工的后台接口（一）customer末尾部分代码//新建员工客户端代码document.getElementById("save").onclick=function(){varrequest=newXMLHttpRequest();//创建XHR对象request.open("POST","action.php");//调用异步请求//数据拼接的URL//document.getElementById("staffName").value获取用户写入的值，形式为vardata="username="+document.getElementById("staffName").value+"&num="+document.getElementById("staffNumber").value+"&workname="+document.getElementById("staffJob").value;request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置http的header信息request.send(data);//发送异步请求//Event监听判断服务器是否能正确响应也可以将内容写入元素//Ajax引擎对象通过responseText属性或responseXML属性接收服务器返回的数据，然后在静态页面中进行处理，使页面达到局部刷新的效果document.getElementById("createResult").innerHTML=request.responseText;}else{alter("发生错误："+request.status);}}}}(2)部分服务器端代码://查询员工服务器端代码3.JSON格式(1)json：javascript对象表示(2)json是一种存储和交换文本信息的语法，类似于xml。由键值对组织，易于人阅读和机器解析。(3)json与语言无关，无论什么语言都能解析json，只要遵循json的规则即可。(4)json的长度比xml小；json的读写速度更快；json可以直接通过js内置的方法解析，转化为js对象，非常方便。(5)JSON语法规则：JSON数据的书写格式为：名称/值对。名/值对组合中的名字写在前面（用双引号），值对写在后面（也用双引号），用冒号隔开，如"name":"KingSledgehammer".注意：json不同于javaScript对象表示法。javaScript对象表示法的key值不需要引号，json的key值需要引号。注意：json可以是整数、浮点数、字符串（双引号）、布尔值（true或false）、数组（方括号）、对象（大括号）、null等数据类型。举个栗子：{//定义一个json对象"staff":[//定义一个数组{"name":"WangDahammer","age":21},//定义一个name对象{"name":"CallingBeast","age":35}]}(6)JSON解析：eval()和JSON。JSON格式的Eval()；不安全，如果json中有函数或者js程序代码（alert或者一个window.location.href()跳转链接病毒网站等），代码会先被执行，属于危险操作。JSON.解析（）；对json文件有校验功能。如果json文件中有程序脚本，则会解析并报错。例如：varjsondata='{"staff":[{"name":"王大锤","age":22},{"name":"召唤兽","age":23},{"name":"王尼玛","age":24}]}';varjsonobj=JSON.parse(jsondata);//JSON.parse解析JSONvarjsonobj=eval('('+jsondata+')');//eval解析JSONalert(jsonobj.staff[0].name);注意：上面的写法是错误的，只是为了清楚起见。逗号不是分隔符，逗号是文本内容，一切都要写得紧凑，不能为了看得清楚而人为地用空格隔开。（我在这里找了一个小时报错。。。）（7）json校验工具：JSONLint（8）举个栗子：首先使用json需要服务端协议。这个方法可以减少更多的判断，更优雅的表单展示{//前端规则校验，后端数据校验"success":true,//是否正确执行（表单及其他规则校验）"msg":"×××"//请求的响应值是否成功（http响应返回的信息）}服务端部分代码//echo"参数错误，员工信息不完整";echo'{"成功":false,"msg":"参数错误，员工信息不完整"}';if($query){//echo"Employee:".$_POST["用户名"]."信息保存成功！";echo'{"success":true,"msg":"员工保存成功"}';}else{//echo"Employee:".$_POST["用户名"]."保存信息失败！";echo'{"success":false,"msg":"Failedtosaveemployee"}';}客户端json代码：其他不变，将服务端响应发送的responseText（文本形式）转换为（JSON形式），将json字符串转为json对象数据，然后以对象的形式处理数据request.onreadystatechange=function(){if(request.readyState===4){if(request.status===200){//converttheresponseText(textform)从服务器响应传递到(JSONform)//convertthejsonstringConvertedtoajsonobjectdatavardata=JSON.parse(request.responseText);if(data.success){document.getElementById("createResult").innerHTML=data.msg;}else{document.getElementById("createResult").innerHTML="有错误"+data.msg;}}}}4.jQuery中的AJAX（一）使用jquery实现ajax请求：作用：避免兼容性问题，代码简洁，操作快捷方便（二）语法：jQuery.ajax([settings])type：类型，“POST”或“GET”，默认为“GET”。url：发送请求的地址。data：是一个对象，连同请求发送到服务器的数据。dataType：服务器返回的预期数据类型。如果不指定，jQuery会自动根据HTTP包的MIME信息进行智能判断。一般我们使用json格式，可以设置为“json”。success：是请求成功后销毁函数的方法。传入返回的数据，以及包含成功代码的字符串。error：是一个方法，这个函数在请求失败的时候被调用。传入XMLHttpRequest对象。更新时间：2018/2/1323:36:53
