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 函数