ajax和ajkx不得不说的故事。。。
一、发送请求
ajax在js中的功能实现是采用内置对象(内置对象就是指这个语言自带的一些对象,供开发者使用,这些对象提供了一些常用的或是最基本而必要的功能)
var xhr = new XMLHttpRequest();
1、使用ajax发送get请求方式
① 调用xhr的open()
参数一:请求方式
参数二:url地址
xhr.open('GET', '/ajax/data.php?id=1&age=10');
② 调用xhr的send()
参数一:要发送的请求参数
采用get请求,可以不传参数,或者传入null(推荐)
xhr.send(null);
2、使用ajax发送post请求方式
① 调用xhr的open()
xhr.open('POST', '/ajax/data.php?id=1&age=10');
② 调用xhr的send()
参数一:请求方式
参数二:要发送的请求参数
使用POST请求方式,参数需要以urlencoded形式进行传入
urlencoded的形式为:name=jack&age=17&gender=male
设置为urlencoded形式后,需要告诉服务端数据的形式为urlencoded,才可以被服务端识别。
需要使用xhr的setRequestHeader()设置请求头中的content-type信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name=jack&age=17&gender=male');
二、接收响应
1、ajax的操作通常为异步操作,所以不能直接在发送请求后立即对响应内容进行操作,使用onreadystatechange事件进行响应内容处理
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
//xhr的status属性,表示状态码。如果readyState为4时,再进行响应体内容的操作即可,还需确保status属性为200时才可以进行操作。
console.log(xhr.responseText);
}
};
通过观察readyState属性的状态改变,来判断当前请求的执行情况。
readyState属性取值为5个,都是数值类型。
0,初始化,创建了用于进行ajax操作的对象
1,调用了open,建立了与服务端的链接
2,调用了send,请求已被发送
3,下载中,响应头已经得到,响应体下载中
4,下载完成,响应体下载完毕,此时才可以使用响应体内容
三、JSON
JSON和XML都是用于数据传输的一种形式,但XML已经不用了,JSON是主流数据交换格式
JSON实际上就是一种特殊的字符形式,特点是属性名必须设置为双引号,而且由于JSON是一种数据传输形式,所以对象中的方法不会被成功转换,因为函数不属于数据。
通过js中的方法进行JSON操作:① JSON.stringify(),将一个js对象转换为JSON形式的字符串。② JSON.parse(),将一个JSON形式的字符串转换为js的对象形式。
var arr = [1, 2, 3];
var obj = {
name : 'jack',
age : 18,
gender : 'male',
sayHi : function () {
console.log('这是sayHi的内容');
}
};
console.log(JSON.stringify(arr));//[1,2,3]
console.log(JSON.stringify(obj));//{"name":"jack","age":18,"gender":"male"}
// JSON.parse()的使用演示:
var xhr = new XMLHttpRequest();
xhr.open('GET', '/ajax/datas3.php');
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
// 将从服务端得到的JSON形式的数据转换为js可以识别的数据类型
var datas = JSON.parse(xhr.responseText);
console.log(datas);
}
};
//以下是/ajax/datas3.php中的代码
<?php
// 从数据库中获取一些数据,响应给客户端
$link = mysqli_connect('127.0.0.1', 'root', 'root', 'test');
$sql = 'select * from lists;';
$query = mysqli_query($link, $sql);
$result = mysqli_fetch_all($query);
// php中用于进行JSON操作的函数有:
// json_encode(); - 将php中的数据形式转换为JSON形式
// json_decode(); - 将JSON形式的数据转换为php的数据类型
echo json_encode($result);
?>