首页
所有分类
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_MySQL教程-第一天
Mar 18 PHP
php下用cookie统计用户访问网页次数的代码
May 09 PHP
PHP无限分类(树形类)的深入分析
Jun 02 PHP
关于svn冲突的解决方法
Jun 21 PHP
php使用smtp发送支持附件的邮件示例
Apr 13 PHP
php生成QRcode实例
Sep 22 PHP
PHP使用feof()函数读文件的方法
Nov 07 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
Nov 28 PHP
php简单socket服务器客户端代码实例
May 18 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
Jul 20 PHP
PHP基于cookie实现统计在线人数功能示例
Jan 16 PHP
PHP容器类的两种实现方式示例
Jul 24 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
内存(1) 连接数(1) 访问日志(2) 缓存(3) 事务(5) 弱口令(1) 策略(1) ipv6(1) 线程(1) 锁(1)
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
js如何打印object对象
2015/10/16 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
PyQt5每天必学之布局管理
2018/04/19 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
pytorch梯度剪裁方式
2020/02/04 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
python 图像增强算法实现详解
2021/01/24 Python
Currentbody西班牙：美容仪专家
2019/09/28 全球购物
初中学生评语大全
2014/04/24 职场文书
天鹅湖观后感
2015/06/09 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android