Ajax基础
Asynchronous JavaScript and XML
简单的说就是局部刷新或局部请求
请求:请求行 - 请求头 - 请求体
在AJAX中创建请求对象:
第一步:
实例化一个异步请求对象
var xhr = new XMLHttpRequest();
xhr.open('get', 'test.php');
get请求需要在url后设置参数,
如open('get', 'test.php?name=rose&age=18')
,而post仅需要填url
第一个参数是请求的类型,相当于表单的method
第二个参数是请求的地址 是服务器上的地址
第三个参数是设置同步(true)还是异步(false),一般默认是异步。
第二步:设置请求头
get请求头一般跳过不用设置,post才需要设置
参数一:键 参数二:值
xhr.setRequestHeader('conrent-type', 'text/html');
在这里仅为示例,post有专门的固定写法,下面有详解
第三步:发送请求 / 设置请求体
发送请求:
xhr.send();
里面的参数也是只有POST才需要设置 ,POST方式在send中发送参数,如:send(name=rose&age=18);
监听响应完成事件:响应完 才拿到
xhr.onload = function () {
xhr.responseText; //获得字符串形式的响应数据。(现阶段常用)
xhr.responseXML; //获得 XML 形式的响应数据。
}
响应完成拿到响应体
注意,js写在页面上面的时候暂时用
window.onload = function () { }
发送POST请求:
var xhr = new XMLHttpRequest();
xhr.open('post', 'test.php');
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');//固定写法!
xhr.send('对应后端的参数传递方式');
xhr.onload = function () { }
xhr.onreadystatechange
事件,只要响应变化改变就会产生变化,不存在兼容性问题
xhr.readyState 状态码:
0: 请求未初始化 (刚刚创建出请求对象)
1: 服务器连接已建立 (open完成)
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪 (在此阶段拿响应体)
xhr.status 状态码:
200: "OK"
404: 未找到页面
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
用这种方式 替代onload
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("myDiv").innerHTML = xhr.responseText;
}
}
以上方式常用!
JSON
JavaScript Object Notation
轻量级的数据传输格式
Json本质是字符串
{ }代表对象: '{"name" : "Jack" , "age" : 18}'
键值对的键必须带引号
[ ]代表数组: '[10,20,30]'
每套语言都有一套API能够把Json转换为自己的语言
如,在JS中的JSON.parse() :
var obj = '{"name" : "Jack"}';
JSON.parse(obj);
JS对象转换为JSON字符串:
var str = JSON.stringify(obj);