如何在php项目中使用原生ajax请求_程序开发

如何在php项目中使用原生ajax请求

创始人

2024-12-05 22:42:31

0次

1、创建XHR对象

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

2、XHR的对象属性和方法

方法：
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请求



  
    ajax

ajax.php如下：

填入数据，当鼠标焦点离开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


  
    ajax

ajax.php如下：

单击submit后发送post请求，弹出响应信息。

5、返回值json，html，text，xml

返回值只有两种text，和xml。不过text内容中可以是一段html或json结构的字符串。

(1)、返回json格式



  
    ajax

ajax.php如下：

 1, 'name' => '上海'),
  array('id' => 2, 'name' => '北京'),
  array('id' => 3, 'name' => '深圳'),
);
echo json_encode($data);

(2)、返回xml格式

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



  
    ajax

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 += "

" + title[0].childNodes[0].nodeValue + "

"; str += "

" + title[1].childNodes[0].nodeValue + "

"; str += "

" + title[2].childNodes[0].nodeValue + "

"; news.innerHTML = str; } }; //打开链接 xhr.open("get", url, true); //发送请求 xhr.send(null); }

ajax.php如下：



  111
  222
  333

EOD;
echo $xml;

6、ajax的同步与异步

通过设置open()的第三个参数true/false，来查看请求的效果。

同步请求：

发送请求->等待结果->操作完成->继续后面代码。我们必须等待结果处理完毕后才能继续后面的代码，严格按照步骤一步一步执行。

异步请求：

发送请求->继续后面代码->响应结果接收完毕->操作结果。异步请求在发送请求之后没有等待结果的返回而是继续执行后面的代码，也就是说在结果返回之前用户可以操作其他东西。

上一篇：使用php怎么实现一个无刷新操作

下一篇：php5.3/5.4/5.5/5.6/7常见新增特性有哪些

如何在php项目中使用原生ajax请求

相关内容

热门资讯