如何在php项目中使用原生ajax请求？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
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，来查看请求的效果。
同步请求：
发送请求->等待结果->操作完成->继续后面代码。我们必须等待结果处理完毕后才能继续后面的代码，严格按照步骤一步一步执行。
异步请求：
发送请求->继续后面代码->响应结果接收完毕->操作结果。异步请求在发送请求之后没有等待结果的返回而是继续执行后面的代码，也就是说在结果返回之前用户可以操作其他东西。
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
