首页
所有分类
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 相关文章推荐
wiki-shan写的php在线加密的解密程序
Sep 07 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
Nov 07 PHP
用PHP书写安全的脚本代码
Feb 05 PHP
php在window iis的莫名问题的测试方法
May 14 PHP
PHP编码规范的深入探讨
Jun 06 PHP
CodeIgniter安全相关设置汇总
Jul 03 PHP
php+mysql数据库实现无限分类的方法
Dec 12 PHP
php 如何禁用eval() 函数实例详解
Dec 01 PHP
PHP面向对象程序设计类的定义与用法简单示例
Dec 27 PHP
PHP中检查isset()和!empty()函数的必要性
Feb 13 PHP
Yii框架常见缓存应用实例小结
Sep 09 PHP
详解Laravel服务容器的绑定与解析
Nov 05 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
RabbitMQ(3) 入门基础(1) Geospatial(1) 触发器(3) XML(1) metaclass(1) Bean(3) 数据类型(8) IOC(3) Hash(1)
You might like
php字符串截取问题
2006/11/28 PHP
php面向对象全攻略 （九）访问类型
2009/09/30 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
js常用代码段收集
2011/10/28 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
基于NodeJS的前后端分离的思考与实践（六）Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
pandas如何处理缺失值
2019/07/31 Python
python__name__原理及用法详解
2019/11/02 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
黑猩猩商店：The Chimp Store
2020/02/12 全球购物
八年级语文教学反思
2014/02/11 职场文书
专业技术职务聘任书
2014/03/29 职场文书
大学新生入学教育方案
2014/05/16 职场文书
公司承诺书怎么写
2014/05/24 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书