首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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下的原生ajax请求用法实例分析

- Author -

怀素真

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
php 数组排序 array_multisort与uasort的区别
Mar 24 PHP
apache和php之间协同工作的配置经验分享
Apr 08 PHP
PHP判断表单复选框选中状态完整例子
Jun 24 PHP
PHP实现支持SSL连接的SMTP邮件发送类
Mar 05 PHP
JSON用法之将PHP数组转JS数组，JS如何接收PHP数组
Oct 08 PHP
php打包网站并在线压缩为zip
Feb 13 PHP
php实现按天数、星期、月份查询的搜索框
May 02 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
Nov 08 PHP
Ajax中的JSON格式与php传输过程全面解析
Nov 14 PHP
php通过header发送自定义数据方法
Jan 18 PHP
PHP双向链表定义与用法示例
Jan 31 PHP
php如何计算两坐标点之间的距离
Dec 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
IDEA(2) 多维数组(1) Spring-Retry(1) Spring Boot(5) 多线程(6) ICF-5900W(2) Fragment(1) EventBus(1) OpenLayer(1) Sqlite(2)
You might like
关于PHP实现异步操作的研究
2013/02/03 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
Python continue继续循环用法总结
2018/06/10 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
老板电器官方购物商城：老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
新西兰优惠网站：Treat Me
2019/07/04 全球购物
销售副总经理岗位职责
2013/12/11 职场文书
学术会议主持词
2014/03/17 职场文书
德育标兵事迹材料
2014/08/24 职场文书
小学庆六一活动总结
2014/08/28 职场文书
统计员岗位职责
2015/02/11 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
高一军训感想
2015/08/07 职场文书
python如何为list实现find方法
2022/05/30 Python