php下的原生ajax请求用法实例分析

吾爱主题阅读：148 2021-09-30 13:42:00 评论：0

本文实例讲述了php下的原生ajax请求用法。分享给大家供大家参考，具体如下：

浏览器中为我们提供了一个JS对象XMLHttpRequet，它可以帮助我们发送HTTP请求，并接受服务端的响应。

意味着我们的浏览器不提交，通过JS就可以请求服务器。

ajax(Asynchronous Javascript And XML)其实就是通过XHR对象，执行HTTP请求。

1、创建XHR对象

1	`var` `xhr =` `new` `XMLHttpRequest();` `//暂不考虑兼容`

2、XHR的对象属性和方法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 方法： open( "get/post" , url, true / false ); //有参数则k=v&k1=v1这种形式 send( null ); 属性： //代表请求状态，不断变化，为4时，请求结束 readyState //响应的内容 responseText //响应的状态码200，403，404 status //状态文字 statusText 事件： //当readyState变化时会触发此事件 onreadystatechange = function () {};

3、通过XHR对象发送get请求

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!DOCTYPE html> <html> <head> <title>ajax</title> <meta charset= "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= "text/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) { //responseText服务器响应的内容 alert( "服务器响应数据：" + this .responseText); } }; //打开链接 xhr.open( "get" , url, true ); //发送请求 xhr.send( null ); } </script> </html>

ajax.php如下：

1 2 3 <?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的形式拼接，并用send()发送

(3)、必须要设置Content-Type为application/x-www-form-urlencoded

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <!DOCTYPE html> <html> <head> <title>ajax</title> <meta charset= "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) { //responseText服务器响应的内容 alert( "服务器响应数据：" + this .responseText); } }; //打开链接 xhr.open( "post" , url, true ); //设置请求头部 xhr.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" ); //发送请求 xhr.send( "name=" + name + "&pwd=" + pwd); } </script> </html>

ajax.php如下：

1 2 3 4 <?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格式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <!DOCTYPE html> <html> <head> <title>ajax</title> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > </head> <body> <div id= "box" > <select id= "city" ></select> <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) { //responseText服务器响应的内容 //通过eval把传来的json字符串转成对象 var data = eval( this .responseText); 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.send( null ); } </script> </html>

ajax.php如下：

1 2 3 4 5 6 7 <?php $data = array ( array ( 'id' => 1, 'name' => '上海' ), array ( 'id' => 2, 'name' => '北京' ), array ( 'id' => 3, 'name' => '深圳' ), ); echo json_encode( $data );

(2)、返回xml格式

xml通过responseXML来读取，responseXML不是字符串，是DOM对象。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <!DOCTYPE html> <html> <head> <title>ajax</title> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-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.getElementById( "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) { //responseXML服务器响应的内容 var data = this .responseXML; 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.send( null ); } </script> </html>

ajax.php如下：

1 2 3 4 5 6 7 8 9 10 11 <?php header( 'Content-Type: text/xml;charset=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 ;