php下的原生ajax请求用法实例分析
本文实例讲述了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程序设计有所帮助。
- [WCF-Discovery] 客户端如何能够“探测”到可用的服务?
- WCF的安全审核——记录谁在敲打你的门
- Step By Step 一步一步写网站[1] —— 填加数据
- 五个解决方案让MongoDB拥有RDBMS的鲁棒性事务
- Step By Step 一步一步写网站[1] —— 帧间压缩,表单控件
- [WCF-Discovery]如何利用”发现代理”实现可用服务的实时维护?
- 深度学习与机器学习
- Step By Step 一步一步写网站[1] —— 填加数据(二)
- [WCF-Discovery]让服务自动发送上/下线通知[原理篇]
- [WCF-Discovery]让服务自动发送上/下线通知[实例篇]
- [WCF权限控制]利用WCF自定义授权模式提供当前Principal[实例篇]
- [WCF权限控制]利用WCF自定义授权模式提供当前Principal[原理篇]
- [自定义服务器控件] 第一步:文本框。
- 检查两个数据库里的表名、字段是否一致的一种方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 快速学习-ElasticJob应用API
- 快速学习-ElasticJob-Lite Quick Start
- 快速学习-ElasticJob-Cloud Quick Start
- @JacksonInject与@JsonAlias注解-JSON框架Jackson精解第4篇
- 医疗NLP相关数据集整理
- 我们如何用 K8S 搞定 1000 个应用的测试环境
- 如何实现rsync多并发同步?
- 分享Linux内存占用几个案例
- 30个编程小技巧,提高代码性能
- OpenGL ES 3D 模型的加载和渲染
- FFmpeg 播放器视频渲染优化
- Istio中的流量配置
- Envoy 代理中的请求的生命周期
- Xilinx 7系列时钟结构
- 模拟入栈操作