Ajax开发笔记

一、 同步与异步

浏览网页的时候两种情况：
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语法


![jQuery的ajax语法](http://upload-images.jianshu.io/upload_images/2572649-1b3323991ff5d7df.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#####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"。