首页
所有分类
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数据库连接类~~做成一个分页类!
Nov 25 PHP
php miniBB中文乱码问题解决方法
Nov 25 PHP
php去掉字符串的最后一个字符附substr()的用法
Mar 23 PHP
使用PHP实现蜘蛛访问日志统计
Jul 05 PHP
分享PHP函数实现数字与文字分页代码
Jul 28 PHP
php实现过滤字符串中的中文和数字实例
Jul 29 PHP
mac系统下为 php 添加 pcntl 扩展
Aug 28 PHP
详解cookie验证的php应用的一种SSO解决办法
Oct 20 PHP
PHP后期静态绑定实例浅析
Dec 21 PHP
laravel 框架结合关联查询 when()用法分析
Nov 22 PHP
PHP 命名空间和自动加载原理与用法实例分析
Apr 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
道歉信(39) 思想汇报(404) 欢迎词(65) 介绍信(57) 演讲稿(869) 表扬信(62) 邀请函(127) 职业生涯规划书(234) 心得体会(660) 证婚词(21)
You might like
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
php curl_init函数用法
2014/01/31 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
nodejs async异步常用函数总结（推荐）
2017/11/17 NodeJs
vuex的简单使用教程
2018/02/02 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
python网络编程学习笔记(二)：socket建立网络客户端
2014/06/09 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
迪士尼法国在线商店：shopDisney FR
2020/12/03 全球购物
费用会计岗位职责
2014/01/01 职场文书
酒店led欢迎词
2014/01/09 职场文书
学校三节实施方案
2014/06/09 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
领导班子整改方案
2014/10/25 职场文书
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers