一、 同步与异步
浏览网页的时候两种情况：
1、白屏 （同步）
2、页面不刷新 （异步） 局部更新页面不会全屏刷新
实现异步局部更新（不使用XMLHttpRequest）
Iframe
Iframe
表单提交后的相应页面返回到iframe当中，主页面内容不变
二、 原生ajax实现异步通信
var btn = document.getElementById('btn');
btn.onclick = function(){
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
//第一步：创建对象
//秘书出场
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//初始化
//准备好了
var url = './check.php?username='+username+"&password="+password;
xhr.open('get',url,true);//true代表异步，false代表同步。
//这段代码在xhr.send();执行完之后才能执行
//这件事做完了怎么办
//事情办完之后干什么
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
if(data == 1){
document.getElementById('showInfo').innerHTML = '用户名或者密码错误';
}else if(data == 2){
document.getElementById('showInfo').innerHTML = '登录成功';
}
}
};
}
//实际的去做这件事
//去做这件事情
xhr.send(null);
}
check.php文件如下：
$username = $_GET['username'];
$password = $_GET['password'];
if($username == 'admin' && $password == '123'){
echo 2;
}else{
echo 1;
}
?>```
xhr.readyState
0：XMLHttpRequest对象创建完成
1：表示发送请求的动作准备好了，但是还没有开始发送
2：表示已经发送完成
3：服务器已经返回了数据
4：服务器返回的数据已经可以使用
xhr.status == 200 表示请求成功；
404表示没有找到这个页面或者数据
503表示服务器端发生错误
回调函数接到的数据类型
responseText
json html script
responseXML
json javascript object notation
相对于xml的优点：数据量相对较小，解析比较方便。
###三、jQuery的ajax语法
#####dataType为String类型
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML
MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP格式。使用 JSONP形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 callback=后面的? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串
#####date为Object/String类型
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。