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


Posted in PHP onFebruary 28, 2020

本文实例讲述了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=v&k1=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=v&k1=v1&k2=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 相关文章推荐
php下实现伪 url 的超简单方法[转]
Sep 24 PHP
实用函数10
Nov 08 PHP
PHP中改变图片的尺寸大小的代码
Jul 17 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
Aug 07 PHP
ThinkPHP框架设计及扩展详解
Nov 25 PHP
PHP中的随机性 你觉得自己幸运吗?
Jan 22 PHP
[原创]php实现子字符串位置相互对调互换的方法
Jun 02 PHP
PHP实现中国公民身份证号码有效性验证示例代码
May 03 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
Jun 09 PHP
php链式操作的实现方式分析
Aug 12 PHP
php中配置文件保存修改操作 如config.php文件的读取修改等操作
May 12 PHP
如何用RabbitMQ和Swoole实现一个异步任务系统
May 29 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
Feb 27 #PHP
php使用fputcsv实现大数据的导出操作详解
Feb 27 #PHP
gearman中任务的优先级和返回状态实例分析
Feb 27 #PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
Feb 27 #PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
Feb 27 #PHP
gearman管理工具GearmanManager的安装与php使用方法示例
Feb 27 #PHP
php使用gearman进行任务分发操作实例详解
Feb 26 #PHP
You might like
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
php cli换行示例
2014/04/22 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Django的session中对于用户验证的支持
2015/07/23 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Python descriptor(描述符)的实现
2020/11/15 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
生日宴会答谢词
2014/01/09 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书