php下的原生ajax请求用法实例分析
发布:smiling 来源: PHP粉丝网 添加日期:2022-02-15 10:24:51 浏览: 评论:0
本文实例讲述了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 = !emptyempty($_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 = !emptyempty($_POST['name']) ? trim($_POST['name']) : '没有数据';
- $pwd = !emptyempty($_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,来查看请求的效果。
同步请求:
发送请求->等待结果->操作完成->继续后面代码。我们必须等待结果处理完毕后才能继续后面的代码,严格按照步骤一步一步执行。
异步请求:
发送请求->继续后面代码->响应结果接收完毕->操作结果。异步请求在发送请求之后没有等待结果的返回而是继续执行后面的代码,也就是说在结果返回之前用户可以操作其他东西。
Tags: php请求用法 ajax请求
- 上一篇:php使用fputcsv实现大数据的导出操作详解
- 下一篇:最后一页
相关文章
- ·php 判断是否为ajax请求(2014-05-12)
- ·PHP判断ajax请求类型(HTTP_X_REQUESTED_WITH)(2014-07-17)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)