本文实例讲述了php下的原生ajax请求用法。分享给大家供大家参考，具体如下：
浏览器中为我们提供了一个js对象xmlhttprequet，它可以帮助我们发送http请求，并接受服务端的响应。
意味着我们的浏览器不提交，通过js就可以请求服务器。
ajax(asynchronous javascript and xml)其实就是通过xhr对象，执行http请求。
1、创建xhr对象
var xhr = new xmlhttprequest(); //暂不考虑兼容
2、xhr的对象属性和方法
方法：open("get/post", url, true/fal);//有参数则k=v&k1=v1这种形式nd(null);属性：//代表请求状态，不断变化，为4时，请求结束readystate//响应的内容respontext//响应的状态码200，403，404status//状态文字statustext事件：//当readystate变化时会触发此事件onreadystatechange = function() {};3、通过xhr对象发送get请求
<!doctype html><html> <head> <title>ajax</title> <meta chart="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="box"> <input type="text" name="con" value="" id="con" /> </div> </body> <script type="tex招聘方案模板t/javascript"> var ipt = document.getelementbyid("con"); ipt.onblur = function () { var con = this.value; //创建xhr对象 var xhr = new xmlhttprequest(); //设置请求url var url = "./ajax.php?con=" + con; //设置xhr对象readystate变化时响应函数 xhr.onreadystatechange = function () { //readystate是请求的状态，为4表示请求结束 if (xhr.readystate == 4) { //respontext服务器响应的内容 alert("服务器响应数据：" + this.respontext); } }; //打开链接 xhr.open("get", url, true); //发送请求 xhr.nd(null); } </script></html>ajax.php如下：
<?php$con = !empty($_get['con']) ? trim($_get['con']) : '没有数据';echo $con;
填入数据，当鼠标焦点离开input时，触发请求，弹出响应内容。
4、通过xhr对象发送post请求
(1)、open()第1参数为post
(2)、post的参数以k=v&k1=v1&k2=v2的形式拼接，并用nd()发送
(3)、必须要设置content-type为application/x-www-form-urlencoded
<!doctype html><html> <head> <title>ajax</title> <meta chart="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="box"> <input type="text" name="name" value="" id="name" /> <input type="password" name="pwd" value="" id="pwd" /> <input type="submit" name="sub" value="提交" id="sub" /> </div> </body> <script type="text/javascript"> var sub = document.getelementbyid("sub"); sub.onclick = function () { var name = document.getelementbyid("name").value; var pwd = document.getelementbyid("pwd").value; //创建xhr对象 var xhr = new xmlhttprequest(); //设置请求url var url = "./ajax.php"; //设置xhr对象readystate变化时响应函数 xhr.onreadystatechange = function () { //readystate是请求的状态，为4表示请求结束 if (xhr.readystate == 4) { //respontext服务器响应的内容 alert("服务器响应数据：" + this.respontext); } }; //打开链接 xhr.open("post", url, true); //设置请求头部 xhr.trequestheader("content-type", "application/x-www-form-urlencoded"); //发送请求 xhr.nd("name=" + name + "&pwd=" + pwd); } </script></html>ajax.php如下：
<?php$name = !empty($_post['name']) ? trim($_post['name']) : '没有数据';$pwd = !empty($_post['pwd']) ? trim($_post['pwd']) : '没有数据';echo '用户名：', $name, '密码：', $pwd;
单击submit后发送post请求，弹出响应信息。
5、返回值json，html，text，xml
返回值只有两种text，和xml。不过text内容中可以是一段html或json结构的字符串。
(1)、返回json格式
<!doctype html><html> <head> <title>ajax</title> <meta chart="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="box"> <lect id="city"></lect> <input type="button" value="获取" id="get" /> </div> </body> <script type="text/javascript"> var get = document.getelementbyid("get"); var city = document.getelementbyid("city"); get.onclick = function () { //创建xhr对象 var xhr = new xmlhttprequest(); //设置请求url var url = "./ajax.php"; //设置xhr对象readystate变化时响应函数 xhr.onreadystatechange = function () { //readystate是请求的状态，为4表示请求结束 if (xhr.readystate == 4) { //respontext服务器响应的内容 //通过eval把传来的json字符串转成对象 var data = eval(this.respontext); var str = ""; for(var ix in data) { str += "<option value='" + data[ix].id + "'>" + data[ix].name + "</option>"; } city.innerhtml = str; } }; //打开链接 xhr.open("get", url, true); //发送请求 xhr.nd(null); } </script></html>ajax.php如下：
<?php$data = array( array('id' => 1, 'name' => '上海'), array('id' => 2, 'name' => '北京'), array('id' => 3, 'name' => '深圳'),);echo json_encode($data);(2)、返回xml格式
xml通过responxml来读取，responxml不是字符串，是dom对象。
<!doctype html><html> <head> <title>ajax</title> &一句话日记lt;meta chart="utf-8"> <meta name="viewport" content="width=device-width, ini圆台侧面积tial-scale=1.0"> </head> <body> <div id="box"> <div id="news"></div> <input type="button" value="获取" id="get" /> </div> </body> <script type="text/javascript"> var get = document.get祖国的诗文elementbyid("get"); var news = document.getelementbyid("news"); get.onclick = function () { //创建xhr对象 var xhr = new xmlhttprequest(); //设置请求url var url = "./ajax.php"; //设置xhr对象readystate变化时响应函数 xhr.onreadystatechange = function () { //readystate是请求的状态，为4表示请求结束 if (xhr.readystate == 4) { //responxml服务器响应的内容 var data = this.responxml; var str = ""; var title = data.getelementsbytagname("title"); str += "<p>" + title[0].childnodes[0].nodevalue + "</p>"; str += "<p>" + title[1].childnodes[0].nodevalue + "</p>"; str += "<p>" + title[2].childnodes[0].nodevalue + "</p>"; news.innerhtml = str; } }; //打开链接 xhr.open("get", url, true); //发送请求 xhr.nd(null); } <黑色星期五中文歌词/script></html>ajax.php如下：
<?phpheader('content-type: text/xml;chart=utf-8');$xml = <<<eod<?xml version="1.0" encoding="utf-8"?><news> <title>111</title> <title>222</title> <title>333</title></news>eod;echo $xml;6、ajax的同步与异步
通过设置open()的第三个参数true/fal，来查看请求的效果。
同步请求：
发送请求->等待结果->操作完成->继续后面代码。我们必须等待结果处理完毕后才能继续后面的代码，严格按照步骤一步一步执行。
异步请求：
发送请求->继续后面代码->响应结果接收完毕->操作结果。异步请求在发送请求之后没有等待结果的返回而是继续执行后面的代码，也就是说在结果返回之前用户可以操作其他东西。
本文发布于:2023-04-08 15:51:07，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/55dbf3e36c9ae8e8c77dae735fe03e3a.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：php下的原生ajax请求用法实例分析.doc
本文 PDF 下载地址：php下的原生ajax请求用法实例分析.pdf
| 留言与评论（共有 0 条评论） |
