首页
所有分类
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录入页面中动态从数据库中提取数据的实现
Oct 09 PHP
php中通过虚代理实现延迟加载的实现代码
Jun 10 PHP
php实现用户在线时间统计详解
Oct 08 PHP
php源代码安装常见错误与解决办法分享
May 28 PHP
ThinkPHP模板判断输出Empty标签用法详解
Jun 30 PHP
Laravel 5框架学习之子视图和表单复用
Apr 09 PHP
wamp服务器访问php非常缓慢的解决过程
Jul 01 PHP
举例详解PHP脚本的测试方法
Aug 05 PHP
刷新PHP缓冲区为你的站点加速
Oct 10 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
Mar 30 PHP
PHP自动识别当前使用移动终端
May 21 PHP
Laravel 微信小程序后端搭建步骤详解
Nov 26 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
sout(1) Sentry(1) 输入法(2) xps(1) CAD(1) 404(1) Sunmao(1) svg(1) macos(1) 403(1)
You might like
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
详解JavaScript的BUG和错误
2018/05/07 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
js编写简易的计算器
2020/07/29 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
django反向解析和正向解析的方式
2018/06/05 Python
python实现Windows电脑定时关机
2018/06/20 Python
详解python算法常用技巧与内置库
2020/10/17 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
Herschel美国官网：背包、手提袋及配件
2020/03/10 全球购物
2014年秋季开学典礼主持词
2014/08/02 职场文书
解除劳动合同协议书（样本）
2014/10/02 职场文书
小学教师求职信范文
2015/03/20 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
Python正则表达式中flags参数的实例详解
2022/04/01 Python
nginx配置限速限流基于内置模块
2022/05/02 Servers
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python