一、原生ajax的实现
1.什么是ajax？
ajax是异步的javas和xml（ Asynchronous JavaScript And XML）。
通过在后台与服务器进行小量的数据交换，ajax可以使网页实现异步更新。就是说可以在不刷新页面的情况下，对页面的某个部分进行刷新。
2.ajax与服务器交换数据的过程是怎么样的
交互的过程
readyState 对象状态值
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
4、ajax有哪些方法使用
| 方 法 | 描 述 |
| abort() | 停止当前请求 |
| getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |
| getResponseHeader("header") | 返回指定首部的串值 |
| open("method","URL",[asyncFlag],["userName"],["password"]) | 建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码 |
| send(content) | 向服务器发送请求 |
| setRequestHeader("header", "value") | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 ) |
5、使用ajax的步骤是怎么样的？
1）创建xhrHTTPRequest对象
2）使用open方法设置和服务器的交互信息
3）设置发送的数据，开始和服务器端交互
4）处理当服务器传数据过来
5）更新界面
6、如何书写
1）get方法
var xhr = new XMLHttpRequest();//创建对象
xhr.open('GET',url+""+data,true);//设置请求的参数，第一个是方式，第二个是地址，这个参数可以带上一些参数，动态的提交数据,第三个为是否异步
xhr.onreadystatechange = function () {//当状态改变的时候调用
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304){
fn.call(this,xhr.responseText);//成功时调用的方法
}
};
xhr.send();//发送请求
2）post方法
var xhr = new XMLHttpRequest();
xhr.open('POST',url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//一定要设置不然，phppost获取不到数据
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200|| xhr.status == 304){
fn.call(this,xhr.responseText);//成功时调用的方法
}
};
xhr.send(data);
3）整合起来
var Ajax = {
get:function (url,fn,data) {
var xhr = new XMLHttpRequest();//创建对象
xhr.open('GET',url+"?"+data,true);//设置请求的参数，第一个是方式，第二个是地址，这个参数可以带上一些参数，动态的提交数据,第三个为是否异步
xhr.onreadystatechange = function () {//当状态改变的时候调用
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304){
fn.call(this,xhr.responseText);//成功时调用的方法
}
};
xhr.send();//发送请求
},
post:function (url,data,fn) {
var xhr = new XMLHttpRequest();
xhr.open('POST',url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//一定要设置不然，phppost获取不到数据
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200|| xhr.status == 304){
fn.call(this,xhr.responseText);//成功时调用的方法
}
};
xhr.send(data);
}
};
所有代码
ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="ajax">
<select id="provinces" οnchange="getProvinces(this.value)">
<option></option>
<option value="guangdong">广东</option>
<option value="fujian">福建</option>
<option value="jiangsu">江苏</option>
</select>
<select id="citys">
</select>
</div>
<script>
var Ajax = {
get:function (url,data,fn) {
var xhr = new XMLHttpRequest();//创建对象
xhr.open('GET',url+data,true);//设置请求的参数，第一个是方式，第二个是地址，这个参数可以带上一些参数，动态的提交数据,第三个为是否异步
xhr.onreadystatechange = function () {//当状态改变的时候调用
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304){
fn.call(this,xhr.responseText);//成功时调用的方法
}
};
xhr.send();//发送请求
},
post:function (url,data,fn) {
var xhr = new XMLHttpRequest();
xhr.open('POST',url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//一定要设置不然，phppost获取不到数据
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200|| xhr.status == 304){
fn.call(this,xhr.responseText);//成功时调用的方法
}
};
xhr.send(data);
}
};
function getProvinces(value) {
var province = value;
console.log(province);
// Ajax.post("getCity.php","province="+province,setCity);//这里的province一定要写成name=value的形式
Ajax.get("getCity.php?","province="+province,setCity);
var citySle = document.getElementById("citys");
citySle.options.length = 0;
citySle.value = "";
}
function setCity(provinces) {
console.log(provinces);
provinces = JSON.parse(provinces);
var citySlect = document.getElementById("citys");
for (var item of provinces){
var option = document.createElement("option");
console.log(item);
var curname = item.name;
var curid = item.id;
option.innerText = curname;
option.id = item.id;
citySlect.appendChild(option);
}
}
</script>
</body>
</html>
getCity.php
<?php
/**
* Created by PhpStorm.
* User: lwl
* Date: 2019/1/12
* Time: 9:10
*/
//$province = $_POST["province"];
$province = $_GET["province"];
if ($province){
$json = file_get_contents("citys.json");
$data = json_decode($json,true);
foreach ($data as $key=>$value){
if ($value["provinces"] == $province){
echo json_encode($value["citys"],true);
}
}
}
citys.json
[
{
"provinces":"guangdong",
"citys":[
{
"name":"惠州",
"id":"huizhou"
},
{
"name":"广州",
"id":"guanghzhou"
},
{
"name":"深圳",
"id":"shenzhen"
},
{
"name":"佛山",
"id":"foshan"
}
]
},
{
"provinces":"fujian",
"citys":[
{
"name":"厦门",
"id":"xiamen"
},
{
"name":"福州",
"id":"fuzhou"
},
{
"name":"莆田",
"id":"putian"
},
{
"name":"泉州",
"id":"quanzhou"
}
]
},
{
"provinces":"jiangsu",
"citys":[
{
"name":"南京",
"id":"nanjing"
},
{
"name":"无锡",
"id":"wuxi"
}
]
}
]
二、jquery 的ajax
1.ajax
ajax( url [, settings ] )
参数用{}括起来
常用参数：
* accepts-->接收服务器返回的数据类型
* async-->默认情况下，所有请求都为异步（true）
* beforeSend-->请求发送前的回调函数
* cache-->浏览器是否缓存此页面
* complete（always(）-->请求完成后的回调函数，这个函数可以接收一个函数的数组，每个函数被依次调用。
* contents-->一个以"{字符串/正则表达式}"配对的对象，根据给定的内容类型，解析请求的返回结果
* contentType-->发送信息到服务器的时候内容编码形式（默认: 'application/x-www-form-urlencoded; charset=UTF-8'）；你必须在服务器端进行适当的解码。
* context-->用来设置ajax相关回调函数的上下文（这个上下文就是dom树中的一个元素），用这个上下文来指定回调函数所应用的对象（就是哪些区域需要被改变）
* data，给服务器传送的数据，将会被自动转换成字符串格式，
* dataType：预期服务器返回的数据类型。如果不指定，jQuery将会自动根据HTTP包中的MIME来判断
* error（fail()）：请求失败时调用的函数，有三个参数（对象，描述错误符，捕获的一层的对象）
* passwor：响应http请求的时候认证密码
* success（done()）：响应成功时调用的函数
* timeout：设置请求超时时间
* type：请求方式（POST,GET）
* url：发送请求的地址
* username：响应http访问认证请求的用户名
<?php
if (isset($_POST["name"])){
echo "this is form ajax: ".$_POST["name"]."and her age is ".$_POST["age"];
}else{
echo "args error";
<form id="myform" method="post">
<label for="name"></label>
<input id="name" type="text">
<label for="age"></label>
<input id="age" type="text">
</form>
<button id="submit">提交表单</button>
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
<script>
$("#submit").click(function () {
$.ajax({
type:"post",
url:"index.php",
data:{
name:$("#name").val(),
age:$("#age").val()
},
success:function (data) {
console.log(data);
},
error:function () {
console.log("请求服务器失败");
},
complete:function () {
console.log("ajax请求完成啦");
}
});
});
</script>
可以看到当我们把地址修改了之后，也就是服务器不能连通之后，就会调用error函数。
或者像下面这样，使用done，fail和always函数
$("#submit").click(function () {
$.ajax({
type:"post",
url:"index.php",
data:{
name:$("#name").val(),
age:$("#age").val()
}
}).done(function (data) {
console.log(data);
}).fail(function () {
console.log("调用函数失败");
}).always(function () {
console.log("不管你成不成都得调用我哈哈哈");
});
});
2.post()
jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )，使用一个HTTP POST 请求从服务器加载数据。
这个操作相当于上面ajax操作的type设置为post
参数如下
* url：发生请求的地址
* data：向服务器发送的数据
* success（data,textStatus,jqXHR）:请求成功后执行的回调函数
* dataType：从服务器预期返回的数据类型
拥有的函数集合跟ajax一样，如done()，fail（），always（）；
$("#submit").click(function () {
var data = "";
$.post(
"index.php",
{
name:$("#name").val(),
age:$("#age").val()
},
function (data) {
console.log(data);
}
);
});
或者
$("#submit").click(function () {
$.post("index.php",{name:$("#name").val(),age:$("#age").val()}).done(function (data) {
console.log(data);
}).fail(function () {
console.log("调用函数失败");
}).always(function () {
console.log("不管你成不成都得调用我哈哈哈");
});
});
3.get和post一样
但是服务器代码要用get来接收
i
f (isset($_GET["name"])){
echo "this is form ajax: ".$_POST["name"]."and her age is ".$_GET["age"];
}else{
echo "args error";
}
$("#submit").click(function () {
$.get("index1.php",{name:$("#name").val(),age:$("#age").val()}).done(function (data) {
console.log(data);
}).fail(function () {
console.log("调用函数失败");
}).always(function () {
console.log("不管你成不成都得调用我哈哈哈");
});
});
$("#submit").click(function () {
var data = "";
$.get(
"index.php",
{
name:$("#name").val(),
age:$("#age").val()
},
function (data) {
console.log(data);
}
);
});
