主页 > 知识库 > php下的原生ajax请求用法实例分析

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

热门标签:Linux服务器 Mysql连接数设置 银行业务 阿里云 团购网站 服务器配置 科大讯飞语音识别系统 电子围栏

本文实例讲述了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/false);
//有参数则k=vk1=v1这种形式
send(null);

属性:
//代表请求状态,不断变化,为4时,请求结束
readyState
//响应的内容
responseText
//响应的状态码200,403,404
status
//状态文字
statusText

事件:
//当readyState变化时会触发此事件
onreadystatechange = function() {};

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

!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如下:

?php
$con = !empty($_GET['con']) ? trim($_GET['con']) : '没有数据';
echo $con;

填入数据,当鼠标焦点离开input时,触发请求,弹出响应内容。  

4、通过XHR对象发送post请求

(1)、open()第1参数为post

(2)、POST的参数以k=vk1=v1k2=v2的形式拼接,并用send()发送

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

!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如下:

?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 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如下:

?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对象。

!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如下:

?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;

6、ajax的同步与异步

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

同步请求:

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

异步请求:

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

更多关于PHP相关内容可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家PHP程序设计有所帮助。

您可能感兴趣的文章:
  • php中如何判断一个网页请求是ajax请求还是普通请求
  • html+js+php一次原始的Ajax请求示例
  • PHP处理Ajax请求与Ajax跨域问题
  • php判断是否为ajax请求的方法
  • jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
  • Ajax请求PHP后台接口返回信息的实例代码
  • PHP开发框架kohana中处理ajax请求的例子
  • php检查是否是ajax请求的方法
  • 在php中判断一个请求是ajax请求还是普通请求的方法
  • 原生javascript的ajax请求及后台PHP响应操作示例

标签:大理 广元 衢州 枣庄 萍乡 江苏 蚌埠 衡水

巨人网络通讯声明:本文标题《php下的原生ajax请求用法实例分析》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266