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 相关文章推荐
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
Jul 01 PHP
php fsockopen伪造post与get方法的详解
Jun 14 PHP
apache配置虚拟主机的方法详解
Jun 17 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
Sep 27 PHP
PHP中通过fopen()函数访问远程文件示例
Nov 18 PHP
PHP实现QQ空间自动回复说说的方法
Dec 02 PHP
PHP中字符与字节的区别及字符串与字节转换示例
Oct 15 PHP
php格式化时间戳
Dec 17 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
Aug 31 PHP
详细解读php的命名空间(一)
Feb 21 PHP
thinkphp中U方法按路由规则生成url的方法
Mar 12 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
May 28 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
PHP之变量、常量学习笔记
2008/03/27 PHP
php生成html文件方法总结
2014/12/01 PHP
php模拟post提交数据的方法
2015/02/12 PHP
php基础教程
2015/08/26 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
Python colormap库的安装和使用详情
2020/10/06 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
廉价航班、机票和酒店:JustFly
2018/02/07 全球购物
保密协议书范本
2014/04/22 职场文书
城管大队整治方案
2014/05/06 职场文书
电影雷锋观后感
2015/06/10 职场文书
病假条格式范文
2015/08/17 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
python实现Nao机器人的单目测距
2021/09/04 Python
Python实现科学占卜 让视频自动打码
2022/04/09 Python