php下的原生ajax请求
浏览器中为我们提供了一个JS对象XMLHttpRequet,它可以帮助我们发送HTTP请求,并接受服务端的响应。
1
|
var xhr = new XMLHttpRequest(); //暂不考虑兼容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
方法:
open( "get/post" , url, true/false);
//有参数则k=v&k1=v1这种形式
send(null);
属性:
//代表请求状态,不断变化,为4时,请求结束
readyState
//响应的内容
responseText
//响应的状态码200,403,404
status
//状态文字
statusText
事件:
//当readyState变化时会触发此事件
onreadystatechange = function () {};
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!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如下:
1
2
3
|
<?php
$con = ! empty ( $_GET [ 'con' ]) ? trim( $_GET [ 'con' ]) : '没有数据' ;
echo $con ;
|
填入数据,当鼠标焦点离开input时,触发请求,弹出响应内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!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如下:
1
2
3
4
|
<?php
$name = ! empty ( $_POST [ 'name' ]) ? trim( $_POST [ 'name' ]) : '没有数据' ;
$pwd = ! empty ( $_POST [ 'pwd' ]) ? trim( $_POST [ 'pwd' ]) : '没有数据' ;
echo '用户名:' , $name , '密码:' , $pwd ;
|
单击submit后发送post请求,弹出响应信息。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!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如下:
1
2
3
4
5
6
7
|
<?php
$data = array (
array ( 'id' => 1, 'name' => '上海' ),
array ( 'id' => 2, 'name' => '北京' ),
array ( 'id' => 3, 'name' => '深圳' ),
);
echo json_encode( $data );
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!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如下:
1
2
3
4
5
6
7
8
9
10
11
|
<?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 ;
|
php下的原生ajax请求相关推荐
- 原生ajax请求及readyState的几种状态
原生ajax请求写法: var http = new XMLHttpRequest();http.open('get','./package.json');http.onreadystatechang ...
- 原生ajax请求的封装
原生ajax请求的封装 原生ajax请求分为四步: 1.创建请求对象 判断浏览器的兼容问题 ie浏览器:window.ActiveXObject 常用浏览器:window.XMLHttpRequest ...
- 原生ajax请求时出现xhr.status==0及POST请求无响应问题
用原生ajax请求时发现xhr.status == 0,于是找了好久,竟然发现是绑定事件的元素不是我点击的元素.参考以下资源 AJAX问题之XMLHttpRequest status = 0 xhr. ...
- 理解ajax技术,封装原生 ajax请求
一.Ajax 概述 Ajax 是 Asynchronous Javascript And XML 的简写 Ajax是一门技术,并不是一门语言 使用XHTML+CSS来标准化呈现 使用XML和XSLT进 ...
- ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
- 前端接收pdf文件_原生ajax请求获取pdf文件流本地下载(支持谷歌IE)
项目中要实现本地下载pdf文件,ajax请求获取到文件全路径,如上,a标签href属性赋值跳转,在iframe里面,谷歌浏览器被阻止下载.那只能另想办法.经过几天的摸索和后台调整接口数据流,终于解决. ...
- 原生Ajax请求流程:同步请求、异步请求
Ajax 异步无刷新技术 原生Ajax的实现流程 得到XMLHttpRequest对象 - var xhr = new XMLHttpRequest(); 打开请求 - xhr.open(method ...
- 发送原生ajax请求的步骤
需要考虑下浏览器的兼容性 <script>/* ajax请求数据的步骤:1.创建ajax对象2.配置请求方式和请求地址以及是否异步请求3.浏览器向服务器发送请求4.服务器接受请求5.判断请 ...
- javscript之原生ajax请求的封装
目录 ajax系列 2:完美版本的ajax请求 ajax系列 1:formateUrl 格式化url函数 作用:就是在ajax发起请求的,需要配置url路径 也就是格式化url 所以里面的参数大概有两 ...
最新文章
- redis del清除缓存java_删除redis缓存报错
- 获取注解中的属性信息
- php证券k线图,php画K线图的一个工具
- [zz]淘宝子团关于kvm 调优的分享
- 2个网页跳来跳去_怎么写最优化的网页标题标签(Title Tag)?
- 智伴机器人安卓怎么设置个人热点_周五到!!宿舍断网怎么办,教你一招
- 小程序的服务器怎么与数据库连接,小程序怎么连接服务器数据库
- struts2学习一:搭建第一个struts2.5项目
- How to learn Lua
- 命令行调用SQL查询分析器
- 铀球(235U)的临界半径计算(1d,S8)
- ECMALL买家取消退款
- 如何使用Jekyll搭建个人博客
- 【安卓开发系列 -- APP 】APP 性能优化 -- 崩溃分析
- 基于Arduino、ESP8266的物联网项目开发方案整理、毕业设计(第一波)
- 图片处理系列一Android照片墙应用实现(绝对不崩溃)
- 阿里云后台研发电话面试凉凉
- 微信小程序之快递查询(完整版)
- 商汤绝影车路协同“进城”!10+个智能网联应用,100+场景算法应用,感知范围扩大1000倍...
- 单元测试之mock使用
热门文章
- redis过期策略和淘汰机制你知道多少?
- springmvc + ajaxfileupload 实现异步上传文件(图片)
- 发光强度/光通量/光照度/亮度/坎德拉/流明/勒克斯/尼特之间的关系和换算
- 相机内外参矩阵和坐标变换
- 人工智能已经迫在眉睫_创意计算机已经迫在眉睫
- 打破学习的玻璃墙_打破Google背后的创新深度学习
- 华为2017年财报,为何6036亿销售收入,净利润才479亿?
- 这些贷款合同陷阱你知道多少?
- “暧昧”的吉本,“疗伤”的芭娜娜
- ISERDES Guidelines