本文我们将和大家分享ajax基础、php与ajax、json格式、jquery中的ajax，希望本文能帮助到大家。
1.ajax基础
(1)ajax(asynchronous javascript and xml):异步的javascript和xml的缩写。
(2)ajax不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术。
(3)传统网页的缺点：需要更新内容或者提交一个表单,需要重新加载整个页面;使用ajax优点：通过在后台跟服务器进行少量的数据交换，网页就可以实现异步局部更新。对于填写复杂表单来说，有非常好的用户体验。
(4)ajax同步与异步：同步说白了就是加载整个页面;异步能够加载部分页面。具体的话,客户端与服务器端的联系。ajax技术出现之前，都是同步的交换数据，如果填写的比较复杂的表单将非常麻烦。有了xmlhttprequest对象后，同步世界变为了异步世界。通过xmlhttprequest这个对象后台可以和服务器进行数据交换。
(5)xmlhttprequest对象创建：var requerst=new xmlhttprequest();直接实例化对象即可!注意：ie5和ie6不支持这种定义，如果要实现浏览器页面兼容，如下代码所示：
var request; if(window.xmlhttprequest){     request  = new xmlhttprequest();  // ie7+,firefox,chrome,opera,safari... }else{     request = new activeobject(microsoft.xmlhttp); // ie6,ie5 }
(6)http请求：http是一种无状态的协议：说白了就是不能建立持久连接且无记忆的协议。进一步：通过页面请求和响应的过程，实现网页的调试。
(6.1)一个完整的http请求过程，通常有下面7个步骤：
建立tcp连接
web浏览器向web服务器发送请求命令
web浏览器发送请求头信息
web服务器应答
web服务器发送应答头信息
web服务器向浏览器发送数据
web服务器关闭tcp连接
(6.2)http请求一般由四部分组成：
http请求的方法或动作，比如是get还是post请求
正在请求的url，总得知道请求的地址是什么吧
请求头，包含一些客户端的环境信息，身份验证信息等
请求体，也就是请求正文，请求正文中可以包含客户提交的查询支付穿信息，表单信息等等
(6.3)get与post[收集来自method=post/get的表单中的name值]
说白了,都是收集从表单里面传过来的值。传过去的值,一种以url的形式显示(不安全),一种以值的形式显示(安全);get一般用于信息的获取，使用url传递参数，限制在2000个字符，对所有人可见，不安全。post一般用于从表单发送数据，参数在http请求体中，不限制信息发送数量。
(6.4)http响应一般由三个部分组成:
由一个数字和文字组成的状态码，用来显示请求是成功还是失败；
响应头，包含服务器类型，日期时间，内容类型和长度等；
响应体，也就是响应正文。
(6.5)http状态码由三位数字组成，其中首位数字定义了状态码的类型：
1xx:信息类，表示收到web浏览器请求，正在进一步的处理中；
2xx:成功，表示用户请求被正确接收、理解和处理，例如：200 ok
3xx:重定向，表示请求没有成功，客户必须采取进一步的动作
4xx:客户端错误，表示客户端提交的请求有错误，如404 not found，意味着请求中引用的文档不存在。
5xx:服务器错误，表示服务器不能完成对请求的处理。
(7)xmlhttprequest发送请求:(对象的方法)
open(method请求方法,url请求地址,async请求同步或者异步(异步是true,同步是false,其实默认就是true));///调用异步请求
send(string);(使用get方法时，参数可以不填写或者null，因为信息都包含在地址栏url中；使用post则一定要填写);//把请求发送到服务器
举个栗子:
request.open(post,create.php,true); request.setrequestheader(content-type,application/x-www-form-urlencoded);//设置http的头信息,告诉web服务器要发送一个表单;注意：setrequest请求一定要放在open和send之间，否则会抛出异常 request.send(name=王大锤&sex=男);
(8)xmlhttprequest取得响应:(对象的方法和属性)
responsetext:简单来说:就是接收服务器响应回送的数据。获得字符串形式的相应数据。
responsxml:获得xml形式的相应数据。现在一般转换为json形式的数据。
status和statustext：以数字和文本形式返回http状态码。
getallresponseheader()：获取所有的响应报头。
getresponseheader()：查询响应中的某个字段的值。
readystate属性：响应返回成功的时候得到通知。
0：请求未初始化，open还没有调用。
1：服务器连接已建立，open已经调用了。
2：请求已经接收，也就是接收到头信息了。
3：请求处理中，也就是接收到响应主体了。
4：请求已完成，且响应已就绪，也就是响应完成了。
举个栗子:涵盖了ajax的大部分内容(典型的xhr建立ajax的过程)
var request = new xmlhttprequest();//创建xhr对象 request.open(get,get.php,true);//调用异步请求 request.send();//发送异步请求 //对事件进行监听,判断服务器是否正确得做出了响应 request.onreadystatechange = function(){   if(request.readystate===4 && request.status === 200){     request.reponsetext;//接收服务器响应回送的数据    } }
2.php与ajax实战:[服务器端与客户端]实现查询员工和新建员工的后台接口(1)客户端部分代码:
//新建员工客户端代码 document.getelementbyid(save).onclick=function(){     var request=new xmlhttprequest();//创建xhr对象     request.open(post,action.php);//调用异步请求     //data拼接的url     //document.getelementbyid(staffname).value获取表单中用户写入的值     var data = 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的头信息     request.send(data);//发送异步请求     //对事件进行监听,判断服务器是否能正确做出响应     request.onreadystatechange=function(){         if(request.readystate===4){             if(request.status===200){                 //innerhtml不仅可以读取元素内容,还可以将内容写入元素                 //ajax引擎对象通过responsetext属性或者responsexml属性接收服务器回送的数据，然后在静态页面中对其进行处理，使页面达到局部刷新的效果                 document.getelementbyid(createresult).innerhtml=request.responsetext;             }else{                 alter(发生错误:+request.status);             }         }     } }
(2)服务器端部分代码:
//查询员工服务器端代码 <?php header('content-type:text/html;charset=utf8'); $con=mysqli_connect("127.0.0.1","",""); mysqli_select_db($con,"function"); $sql="select * from `ajax`"; $query=mysqli_query($con,$sql); //数据库数据的总条数$number $number=mysqli_num_rows($query); for($i=0;$i<$number;$i++){ //将每条数据转换成关联数组打印出来 $arr=mysqli_fetch_row($query); //print_r($arr); //echo $arr[2];die; if($_get['num']==$arr[2]){ echo "找到员工:编号$arr[2],姓名:$arr[1],职位:$arr[3]"; break; } } ?>
3.json格式(1)json:javascript对象表示法。
(2)json是存储和交换文本信息的语法，类似xml。采用键值对的方式组织，易于人们阅读与机器解析。
(3)json是独立于语言的，不管什么语言都可以解析json，只要按json的规则来就行。
(4)json的长度比xml小;json读写的速度更快;json可以使用js内建方法直接解析，转化成js对象，非常方便。
(5)json语法规则：json数据的书写格式是：名称/值对。
名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开，比如name:王大锤。注意：json与javascript对象表示法不同，javascript对象表示法的键值不需要用引号，但是json的键值要用引号。
注意：json可以是整型、浮点型、字符串(在双引号中)、布尔值(true或false)、数组(在方括号中)、对象(在花括号中)、null等数据类型。
举个栗子：
{//定义了一个json对象   staff:[//定义了一个数组     {name:王大锤,age:21},//定义了一个name对象     {name:叫兽,age:35}   ] }
(6)json解析：eval()和json.parse()两种方式解析成json形式
两种方法比较：建议使用json.parse()方法解析成json形式
eval();不安全，如果json中有函数或js程序代码（alert或一个window.location.href()跳转链接病毒网站等），会优先执行代码，危险操作。json.parse();对json文件具有校验功能，如果json文件里面有程序脚本，会解析报错。
举个栗子：
var jsondata='{     staff:[{             name:王大锤,             age:22         },         {             name:叫兽,             age:23         },         {             name:王尼玛,             age:24         }     ] }'; var jsonobj=json.parse(jsondata);//json.parse解析json var jsonobj=eval('(' + jsondata + ')');//eval解析json alert(jsonobj.staff[0].name);
注意：上面书写是错误的，只为了看清楚。逗号不是分隔符，逗号是文本内容，所有的都应该紧凑写，不能自己为了看清楚，人为用空格分开。(这里找了一个小时错误...)
(7)json验证工具：jsonlint
(8)举个栗子:
使用json,首先需要服务器端的约定, 用此种方法能够减少更多的判断,以更加优雅的形式显示 {     //前端规则验证、后端数据验证     success:true,//是否正确执行(表单等规则验证)     msg:×××//请求的响应值是否成功(http响应返回的信息) }
服务器端部分代码://echo 参数错误，员工信息填写不全; echo '{success:false,msg:参数错误，员工信息填写不全}'; if($query){     //echo 员工： . $_post[username] .  信息保存成功！;     echo '{success:true,msg:员工保存成功}'; }else{     //echo 员工： . $_post[username] .  信息保存失败！;     echo '{success:false,msg:员工保存失败}'; }
客户端json代码:其它不变,将服务器端响应传过来的responsetext(文本形式)转换为(json形式),将json字符串转化为了一个json对象data,然后就能够以对象的形式处理数据    request.onreadystatechange=function(){         if(request.readystate===4){             if(request.status===200){                 //将服务器端响应传过来的responsetext(文本形式)转换为(json形式)                 //将json字符串转化为了一个json对象data                 var data=json.parse(request.responsetext);                 if(data.success){                     document.getelementbyid(createresult).innerhtml=data.msg;                 }else{                     document.getelementbyid(createresult).innerhtml=出现错误+data.msg;                 }             }         }     }
4.jquery中的ajax(1)使用jquery实现ajax请求：作用：避免兼容问题，代码简洁，操作快捷方便。
(2)语法:jquery.ajax([settings])
type：类型，“post”或“get”，默认为“get”。
url：发送请求的地址。
data：是一个对象，连同请求发送到服务器的数据。
datatype：预期服务器返回的数据类型。如果不指定，jquery将自动根据http包mime信息来智能判断，一般我们采用json格式，可以设置为“json”。
success：是一个方法，请求成功后的毁掉函数。传入返回后的数据，以及包含成功代码的字符串。
error：是一个方法，请求失败时调用此函数。传入xmlhttprequest对象。
相关推荐：
php与ajax调用
php与ajax实现页面自动刷新
php与ajax相结合实现登录验证小demo_php
以上就是php与ajax实例详解的详细内容。