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

推荐阅读更多精彩内容

  • 第一章 入门 基本功能:访问和操作 dom 元素,控制页面样式,对页面的事件处理,与ajax完美结合,有丰富的插件...
    X_Arts阅读 551评论 0 2
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 1,655评论 0 7
  • Php代码 收藏代码 ajax通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高...
    Yumazhiyao阅读 527评论 0 4
  • Ajax的基本概念及使用 同步&异步 同步:必须等待前面的任务完成,才能继续后面的任务; 异步:不受当前主要任务的...
    magic_pill阅读 757评论 0 5
  • jQuery ajax - ajax() 方法 http://www.w3school.com.cn/jquery...
    東海陳光劍阅读 809评论 0 13