ajax是一个老生常谈的问题，其实并不复杂，不过是因为老前辈通过这样的请求方式玩出了很多花样，迷乱了萌新的眼睛，话不多说。
下面是我贴出的用"GET"和“POST”两种方法
完整的GET请求
var Ajax = new XMLHttpRequest(); //创建ajax
Ajax.open("GET","controller.php?request=data",true)//创建ajax请求方式、地址加数据、异步
Ajax.send();//发起ajax请求
request.onreadystatechange = function () {
if (request.readyState === 4) {//判断响应是否步骤完成
if (request.status === 200) {//判断状态码是否正常
//响应成功,抛出数据
} else {
//响应失败,报错
}
}
};
完整的POST请求
var Ajax = new XMLHttpRequest();//创建ajax
Ajax.open("POST","controller.php",true);//创建ajax请求方式、地址、异步
Ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");//创建信息头
Ajax.send("name=九歌&job=程序员");//发起ajax请求和数据
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
//响应成功,抛出数据
} else {
//响应失败,报错
}
}
};
//注意：
//因为get是url传值，所以不用额外再send()方法中传值
//因为post请求的特殊性，必须必须必须写好写清楚信息头
上面两段代码是对ajax基本语法和使用方法，如果你第一次接触到ajax，可能还是觉得一头雾水，那么我现在解释一下原理，首先ajax是写在script里，可以理解成通过XMLHTTPRequest方法来实现的一个异步传输，而且我们整个要学习的就是JavaScript里面XMLHTTPRequest的一个方法。
OK，上面已经贴出了XMLHTTPRequest的基本语法和使用规范，新手我就建议到这里后在上去看三边代码并记住方法，成功完成一次简单的ajaxGET请求。
已经到了实践操作环节，可能还是觉得有点无法动手，好，我再贴一个列子出来，下面是一个通过XMLHTTPRequest方法来查询获取数据的一个小方法
html文件
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">三国人物录</a>
</div>
<div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" id="keyword" class="form-control" placeholder="输入人物编号">
</div>
</form>
</div>
<button type="submit" id="query" class="btn btn-default">查询</button>
</div>
</nav>
<span>信息为：<p class="pre-scrollable" class="text-center" id="createResult"></p></span>
<script>
//由点击query事件触发查询查询事件
document.getElementById("query").onclick = function()
{
var request = new XMLHttpRequest();
request.open("GET", "ajax.php?number=" + document.getElementById("keyword").value ,true);
request.send();
request.onreadystatechange = function()
{
if (request.readyState === 4)
{
if (request.status === 200)
{
document.getElementById("createResult").innerHTML = request.responseText;
}
else
{
alert("发生错误：" + request.status);
}
}
}
}
</script>
</body>
</html>
php文件(不懂PHP语言不要紧，下面的文档可以直接复制，另存文件名为ajax.php)
<?php
//设置页面内容是html编码格式是utf-8
header("Content-Type: text/plain;charset=utf-8");
//header("Content-Type: application/json;charset=utf-8");
//header("Content-Type: text/xml;charset=utf-8");
//header("Content-Type: text/html;charset=utf-8");
//header("Content-Type: application/javascript;charset=utf-8");
//建立多维数据，写入初始化信息
$staff = array
(
array('name' => "曹操","number" => "101","sex" => "男","job" => "魏武帝"),
array('name' => "荀攸","number" => "102","sex" => "男","job" => "军师"),
array('name' => "张辽","number" => "103","sex" => "男","job" => "将军"),
);
//根据请求方式来判断是运行什么操作，GET是查询search()，POST获取报错。
if ($_SERVER["REQUEST_METHOD"] == "GET")
{
search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST")
{
echo "使用GET方法"；
//报错
}
//建立srarch方法来查询数组
function search(){
//判断是否有员工id
//isset检测是否设置id，empty判断数据是否为空
if(!isset($_GET["number"]) || empty($_GET["number"]))
echo "参数错误";
return;
//使用global将函数变量设置全局变量
global $staff;
$number = $_GET["number"];
$result = "该人物没有收录";
//查询人物信息
//使用foreach遍历多维数组$staff，通过查询key值为number的数据，并返回拼接结果
foreach ($staff as $value) {
if ($value["number"] == $number) {
$result = "找到人物：人物编号：" . $value["number"] . "，人物姓名：" . $value["name"] .
"，人物性别：" . $value["sex"] . "，人物身份：" . $value["job"];
break;
}
}
echo $result;
}
?>
再PHP文件中建立数组，省去了搭建数据库的麻烦，不了解PHP语言的同学可以直接复制代码另存为ajax.php使用，我就不多BBPHP语言了
现在我在理一遍这个步骤和逻辑，希望你可以马上动手实践，
1.建立html文件，并设置关键buttonid，在script中建立触发button条件，接着new XMLHTTPRequest（）方法开始你的ajax请求
2.open方法挨着写入请求方式、请求地址url后面拼接地址、异步传输（默认）
3.send方法发起请求
4.onreadystatechange依次判断readyState === 4和request.status === 200请求是否成功。
备注：在没有PHP文件时，怎么判断你的ajax请求是否生效？
打开你的浏览器的控制器看看下面这4个参数
图片.png
好，打完收工（ps：文笔不好请见谅，还是欢迎提出问题）
网友评论