11-ajax

Ajax

 

1、什么是ajax

Asynchronous JavaScript and XML（异步JavaScript和XML) 节省用户操作，时间，提高用户体验，减少数据请求 传输获取数据

特点可以无刷新读取数据

例如：用户注册、在线聊天室

ajax能且仅能 从服务器读取文件

 

2、Ajax的使用

•基础：请求并显示静态TXT文件

–字符集编码

–缓存、阻止缓存可以利用时间戳

•动态数据：请求JS（或json）文件

–eval的使用

  eval就是计算字符串里的值

var str="function show(){alert('abc');}";
eval(str);
show()

–DOM创建元素

•局部刷新：请求并显示部分网页文件

 

3、HTTP请求方法

•GET——用于获取数据（如：浏览帖子）

放到网址URL里面提交

•POST——用于上传数据（如：用户注册）

不是在放到网址URL里面提交

•GET、POST的区别：提交的方式不同

get是在url里传数据：安全性低、容量低

POST 安全性一般 容量几乎无限

–缓存

 POST：setRequestHeader(类型, 内容)：设置请求头 "Content-Type","application/x-www-form-urlencoded”

json 

json 是存储和交换文本信息的语法。他采用键值对的方式来组织。是独立的语言，任何语言只要符合json的规则都可以解析json。

特点：

1.json长度更短

2.json读写速度更快

3.json可以使用javascript内建的方法直接进行解析，转换成javascript对象，非常方便

语法规则：http://blog.csdn.net/crper/article/details/45625283

 

json解析和校验工具

 

eval("("+ jsondata + ")");<br>

JSON.prase(jsondata);

一般不建议单独使用eval();

实际过程中用JSON.parse(data)来解析格式

 

http://pro.jsonlint.com/ 校验工具

 

4、编写Ajax步骤

第一步：创建Ajax对象 

•ActiveXObject("Microsoft.XMLHTTP") ie6

•XMLHttpRequest() ie6以上

//IE6以上
        /*var oAjax=new XMLHttpRequest();
        
        alert(oAjax);*/
        
        //IE6
        /*var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
        
        alert(oAjax);  */
        //用一个不存在的变量：出错
       //用一个不存在的属性：undefined 
       //兼容写法
        var oAjax=null;
        
        if(window.XMLHttpRequest)
        {
            oAjax=new XMLHttpRequest();
        }
        else
        {
            oAjax=new ActiveXObject("Microsoft.XMLHTTP");
        }

第二步：连接服务器

•open(方法, 文件名, 异步传输)

–同步和异步

同步：事件一件一件来

异步：多件事情可以同时进行

//open(方法, url, 是否异步)
        oAjax.open('GET', 'abc.txt', true);

第三步：发送请求

oAjax.send();

第四步：接收返回

//OnReadyStateChange
        oAjax.onreadystatechange=function ()
        {
            if(oAjax.readyState==4)
            {
                if(oAjax.status==200)
                {
                    alert('成功：'+oAjax.responseText);
                }
                else
                {
                    alert('失败');
                }
            }

 

请求状态监控

•onreadystatechange事件

–readyState属性：请求状态

»0  （初始化）还没有调用open()方法

»1  （载入）已调用send()方法，正在发送请求

»2  （载入完成）send()方法完成，已收到全部响应内容

»3  （解析）正在解析响应内容

»4  （完成）响应内容解析完成，可以在客户端调用了

status属性：服务器(请求资源)的状态 返回的内容

responseText：返回以文本形式存放的内容

responseXML：返回XML形式的内容

5.例子：

<script>
document.getElementById("search").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("GET", "serverjson.php?number=" + document.getElementById("keyword").value);
    request.send();
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                var data = JSON.parse(request.responseText);
                if (data.success) { 
                    document.getElementById("searchResult").innerHTML = data.msg;
                } else {
                    document.getElementById("searchResult").innerHTML = "出现错误：" + data.msg;
                }
            } else {
                alert("发生错误：" + request.status);
            }
        } 
    }
}

document.getElementById("save").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("POST", "serverjson.php");
    var data = "name=" + document.getElementById("staffName").value 
                      + "&number=" + document.getElementById("staffNumber").value 
                      + "&sex=" + document.getElementById("staffSex").value 
                      + "&job=" + document.getElementById("staffJob").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send(data);
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                var data = JSON.parse(request.responseText);
                if (data.success) { 
                    document.getElementById("createResult").innerHTML = data.msg;
                } else {
                    document.getElementById("createResult").innerHTML = "出现错误：" + data.msg;
                }
            } else {
                alert("发生错误：" + request.status);
            }
        } 
    }
}
</script>

 

6、封装ajax

function ajax(url, fnSucc, fnFaild)
{
    //1.创建ajax对象
    var oAjax=null;
    
    if(window.XMLHttpRequest)
    {
        oAjax=new XMLHttpRequest();
    }
    else
    {
        oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.连接服务器
    //open(方法, url, 是否异步)
    oAjax.open('GET', url, true);
    
    //3.发送请求
    oAjax.send();
    
    //4.接收返回
    //OnReadyStateChange
    oAjax.onreadystatechange=function ()
    {
        if(oAjax.readyState==4)
        {
            if(oAjax.status==200)
            {
                //alert('成功：'+oAjax.responseText);
                fnSucc(oAjax.responseText);
            }
            else
            {
                if(fnFaild)
                {
                    fnFaild();
                }
            }
        }
    };
}

7、 jQuery中的AJAX

<script>
$(document).ready(function(){ 
    $("#search").click(function(){ 
        $.ajax({ 
            type: "GET",     
            url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(),
            dataType: "json",
            success: function(data) {
                if (data.success) { 
                    $("#searchResult").html(data.msg);
                } else {
                    $("#searchResult").html("出现错误：" + data.msg);
                }  
            },
            error: function(jqXHR){     
               alert("发生错误：" + jqXHR.status);  
            },     
        });
    });

    $("#save").click(function(){ 
        $.ajax({ 
            type: "POST",     
            url: "serverjson.php",
            data: {
                name: $("#staffName").val(), 
                number: $("#staffNumber").val(), 
                sex: $("#staffSex").val(), 
                job: $("#staffJob").val()
            },
            dataType: "json",
            success: function(data){
                if (data.success) { 
                    $("#createResult").html(data.msg);
                } else {
                    $("#createResult").html("出现错误：" + data.msg);
                }  
            },
            error: function(jqXHR){     
               alert("发生错误：" + jqXHR.status);  
            },     
        });
    });
});
</script>

 

ajax跨域请求限制

 

1、什么是跨域？

跨域：也可以说是跨域名，

简单理解为：一个域名下的文件去请求了和他不一样的域名下的资源文件，那么就会产生跨域请求。

 

2、域名地址的组成

http://img.mukewang.com/57023d51000114b712800720.jpg

http:// www . abc.com ： 8080 /script/jquery.js

协议 子域名 主域名 端口号 资源地址

当协议，子域名，主域名，端口号中任意一个不相同时，都算作不同域。

JS出于安全方面的考虑，不允许跨域调用其他页面的对象

  

 

事实上HTTP和HTTPS两个协议的url看上去都可以省略端口号，但是他们访问的默认端口不同

HTTP默认访问80端口

HTTPS默认访问443端口

所以http访问https肯定是跨域

 

Ajax跨域--跨域的解决

一般来说有两种方法：

方法一：创建代理，通过在同域名的web服务器端创建一个代理 这是后台的方法

方法二：使用jsonp全称是JSON with Padding 。作用主要是用于解决主流浏览器的跨域数据访问问题

jsonp的原理

主要是利用了 <script/> 标签对 javascript 文档的动态解析来实现。

jsonp只能改造get请求不能改造post请求。

jsonp跨域过程的实现

在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情 ，然后需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行我们前面定义好的函数，并且把数据当作这个函数的参数传入进去。

栗子：百度下拉提示

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
#ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}
li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}
li a:hover{ background: #f90; color: white; }
</style>
<script>
function baidu(data) {
    var oUl = document.getElementById('ul1');
    var html = '';
    if (data.s.length) {
        oUl.style.display = 'block';
        for (var i=0; i<data.s.length; i++) {
            html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
        }
        oUl.innerHTML = html;
    } else {
        oUl.style.display = 'none';
    }
}
window.onload = function() {
    var oQ = document.getElementById('q');
    var oUl = document.getElementById('ul1');
    oQ.onkeyup = function() {
        if ( this.value != '' ) {
            var oScript = document.createElement('script');
            oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=baidu';
            document.body.appendChild(oScript);
        } else {
            oUl.style.display = 'none';
        }
    }
}
</script>
</head>

<body>
    <input type="text" id="q" />
    <ul id="ul1"></ul>
</body>
</html>

豆瓣

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
dl {border-bottom: 1px dotted #000;}
dt {font-weight: bold;}
</style>
<script>
function fn1(data) {

    var oMsg = document.getElementById('msg');
    var oList = document.getElementById('list');
    
    console.log(data);
    
    oMsg.innerHTML = data.title.$t + ' : ' + data['opensearch:totalResults'].$t;
    
    var aEntry = data.entry;
    var html = '';
    for (var i=0; i<aEntry.length; i++) {
        
        html += '<dl><dt>'+ aEntry[i].title.$t +'</dt><dd><img src="'+ aEntry[i].link[2]['@href'] +'" /></dd></dl>';
        
    }
    
    oList.innerHTML = html;
    
}
window.onload = function() {
    
    var oQ = document.getElementById('q');
    var oBtn = document.getElementById('btn');
    var oMsg = document.getElementById('msg');
    var oList = document.getElementById('list');
    
    oBtn.onclick = function() {

        if ( oQ.value != '' ) {
            var oScript = document.createElement('script');
            oScript.src = 'http://api.douban.com/book/subjects?q='+oQ.value+'&alt=xd&callback=fn1';
            document.body.appendChild(oScript);
        }
        
        //http://api.douban.com/book/subjects?q='+oQ.value+'&alt=xd&callback=fn1&start-index=(当前页*每页显示的条数)&max-results=10(每页显示的条数)
        
    }
    
}
</script>
</head>

<body>57     <input type="text" id="q" /><input type="button" id="btn" value="搜索" />
    <p id="msg"></p>
    <hr />
    <div id="list"></div>
</body>
</html>

 

 

说明总结：

1.ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

2.但是ajax和jsonp在数据传输的过程中都是可以用json格式的数据。

3.其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。

4.ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

 

总结Ajax基础

1. 什么是AJAX
2. 什么是服务器
3. 使用AJAX，读取服务器环境下的文件
4. 读取文件时注意编码一致
5. 运用AJAX读取服务器文件实例
6. 缓存及其影响
7. 用 new Date().getTime() 方式消除缓存的影响
8. 读取服务器文件中的数据全是字符串
9. eval() 方法
10. 用eval() 方法解析字符串
11. 文件的扩展名与AJAX的关系
12. 读取数组里的json
13. AJAX 分页实例，创建数据
14. 布局、ajax 读取、生成 li 元素，读取数据，预先清空数据
15. AJAX 原理、http请求：GET \ POST，两种方式的区别

Ajax中级

1. 编写 Ajax 库，AJAX 请求步骤
2. 创建 ajax 对象：XMLHttpRequest
3. 在 IE6 下兼容 XMLHttpRequest 的解决方案：ActiveXObject("Microsoft.XMLHTTP")
4. window属性与变量的关系
5. 用 window 属性来处理 IE6 的兼容性问题
6. 连接服务器：oAjax.open()
7. 同步与异步的区别
8. 发送请求：oAjax.send()
9. 接收返回：oAjax.onreadystatechange、readyState 属性、oAjax.status、oAjax.responseText
10. 封装 AJAX 函数