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 相关文章推荐
实例(Smarty+FCKeditor新闻系统)
Jan 02 PHP
PHP中Date获取时间不正确怎么办
Jun 05 PHP
PHP中$_SERVER的详细参数与说明
Jul 29 PHP
php实现CSV文件导入和导出
Oct 24 PHP
Composer设置忽略版本匹配的方法
Apr 27 PHP
php有效防止图片盗用、盗链的两种方法
Nov 01 PHP
php自定义时间转换函数示例
Dec 07 PHP
php中简单的对称加密算法实现
Jan 05 PHP
php防止sql注入的方法详解
Feb 20 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
Mar 15 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
Nov 17 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
Sep 16 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中文乱码解决方案
2015/03/05 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
python中的装饰器详解
2015/04/13 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
python如何爬取个性签名
2018/06/19 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
python带参数打包exe及调用方式
2019/12/21 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
Python创建临时文件和文件夹
2020/08/05 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
美国糖果店:Sugarfina
2019/02/21 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
岗位廉政承诺书
2014/03/27 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
大气污染防治方案
2014/05/19 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
2015年党风建设工作总结
2015/04/29 职场文书