1.get请求
var name = document.getElementById('username').value;
//转码
name = encodeURIComponent(name);
//创建ajax对象
var XHR = new XMLHttpRequest();
XHR.open('get','text.php?name=' + name);
XHR.onreadystatechange = function () {
if (XHR.readyState == 4 && XHR.status == 200) {
//do something
}
};
XHR.send();
state和status的区别
来个形象的比方，你体重多少公斤，属于status，但说你体重属于偏瘦、正常还是偏胖，那就是state.
2.POST 请求
1、必须通过send()发送 数据
2、必须设置setRequestHeader('Content-Type','application/x-www-form-urlencoded');将传递的值的参数转成XML格式
3、post提交可以直接提交中文
4、post请求中的字符也会和URL中的&、=字符相混淆，所以建议也要使用encodeURIComponent()编码
var name = document.getElementById('username').value;
//转码
name = encodeURIComponent(name);
//创建ajax对象
var XHR = new XMLHttpRequest();
XHR.open('post','text.php?');
XHR.onreadystatechange = function () {
if (XHR.readyState == 4 && XHR.status == 200) {
//do something
}
};
XHR.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XHR.send('name='+name);
readyState
0 初始状态 xhr对象刚创建完
1 连接 连接到服务器
2 发送请求 刚刚send完
3 接收完成 响应头接收完成
4 接收完成 响应体接收完成
3.POST和GET的区别
（1）最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。
（2）GET在浏览器回退时是无害的，而POST会再次提交请求。
（3）GET请求会被浏览器主动cache，而POST不会，除非手动设置。。
（4）字数限制：当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST的传输字数无限制。
（5）对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
（6）GET适用于数据的查询和获取，POST适用于数据的增加删除和修改。
99%的人都理解错了HTTP中GET与POST的区别
4.AJAX缓存
浏览器第一次访问服务器的时候，需要从服务器加载很多的静态资源（CSS、JS、Image），并将这些资源文件缓存在浏览器中，当再次访问页面的时候，如果有相同的资源文件就直接到缓存中去加载，这样就会降低服务器的负载和带宽，加快用户访问。
但是这样也会出现bug，比如获取验证码，比如获取服务器动态数据，这个时候就要避免使用浏览器中的缓存
- 方法一：在URL地址中添加随机数，这样使得URL是唯一的。
- 方法二：设置header头，禁止浏览器缓存该文件
header("Cache-Control:no-cache");
header("Pragma:no-cache");
header("Expires:-1");
5.PHP生成JSON数据
1、json_encode()：将PHP数据转成json格式
2、json_decode()：将JSON格式转成PHP数据格式
5.1将索引数组转成JSON格式、并逆转换
索引数组转成JSON格式还是数组的格式，逆转换用数组的位置做下标
5.2将关联数组转成JSON格式并逆转换
关联数组转成JSON格式还是字面量对象的格式，逆转换用数组的键做下标
5.3既有关联数组，也有索引数组
只要有一个元素是关联数组的形式，就转换成键值对的形式（字面量对象），没有键的元素用元素的位置做键。
5.4二维数组转换成JSON格式
5.5转换对象
6.FormData
FormData是表单数据对象，可以实现快速收集表单信息，HTML5以后才支持。
使用FormData对象post传递数据不需要设置setRequestHeader()
PHP页面
<?php
var_dump($_POST);
HTML页面
<script type="text/javascript">
window.onload=function(){
document.getElementById('btn').onclick=function(){
var frm=document.getElementById('frm');
var fd=new FormData(frm); //收集frm表单的数据,文本数据和二进制数据
var req=new XMLHttpRequest();
req.open('post','./5-demo.php');
req.onreadystatechange=function(){
if(req.readyState==4 && req.status==200){
console.log(req.responseText);
}
}
req.send(fd); //发送FormData对象
}
}
</script>
<form action="" id="frm">
用户名：<input type="text" name="username" id=""><br>
密码：<input type="password" name="pwd" id=""> <br>
<input type="button" value="用户登录" id='btn'>
</form>
