ajax

首先说一下js是单线程执行，但是存在异步执行机制（定时器和事件）

(一)什么是ajax:

ajax(ajax = 异步JavaScript和XML)是利用一系列的交互式网页应用相关的技术所形成，是一串技术的结合体，ajax内置进了浏览器（实际上是浏览器内建了XMLHttpRequest对象），所以不需要安装插件,只需要用户允许 JavaScript在浏览器上执行

（二）ajax概述：

1.ajax是JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术，是一串技术的集合，主要有：

①javascript : 通过用户或其他浏览器相关事件捕获交互行为。

②XMLHttpRequest对象:ajax对象的生产者，可以在不中断其他浏览器任务的情况下向服务器发送请求。

③服务器上的文件以XML，HTML或JSON格式保存文本数据

④其他JavaScript来处理从服务器请求来的数据

2.优点：

①不需要插件

②不需要刷新整个页面，就可以对网页的部分数据进行更新

③将服务器的操作转移到客户端，请求的少加载的快，减轻了宽带的压力

3.缺点：

④IE5之前的对ajax的不支持

⑤ajax加载总在当前页面，不会回退到之前页面

⑥搜索引擎支持度不够，因为搜索引擎的爬虫还不能理解JS引起变化数据的内容

⑦开发调试工具少，相对其他语言的工具集来说，JS或Ajax调试开发少的可怜

4.①var ajax = new XMLHttpRequest()//创建一个XMLHttpRequest对象,用于与后台交换数据，不需要重新加载整个网页就能对网页的某一部分进行更新

  ②ajax.open(“GET”,“http://..？”+new Date().getTime())//设置请求参数,加上去时间戳每次请求都会更新

  ③ajax.send(null)   //已经被很多浏览器当成必选参数了

  ④ajax.onreadystatechange = function(){

   //readystate改变时会触发该函数

//时间的触发和请求状态有关

//和网速有关

//不确定多久会执行

//异步

Console.log(ajax.readyState)  //ajax对象的状态，状态码有0,1,2,3,4

0:(未初始化)还没有调用send()方法

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

2：（载入完成）send()方法执行完成，已经接收到全部响应内容

3:(交互)正在解析响应内容

4:(完成)响应内容解析完成(XMLHttpRequest已成功接收到数据)可以在客户端调用了

⑤if(ajax.readyState == 4 && ajax.status == 200){

   Console.log(“可以得到结果“)

   Console.log（ajax.responseText）//后台请求的结果

}

}

http状态码： 1系列(浏览器问题)

              2系列（成功）

              3系列（js逻辑，代码问题）

              4系列(路径问题)

              5系列（服务器的问题，找后台解决）

5.封装GET获取数据：

      function ajaxGet(url,callback,data){

      if(arguments.length == 3){  //若为3则是发送数据，以此判断发送和接收

   url += “?” + data   //data为参数即字段名=字段值

}

       var ajax = new XMLHttpRequest();

       ajax.open(“GET”,url);

       ajax.send(null);

       ajax.onreadystatechange == function(){

    if(ajax.readyState == 4 && ajax.status == 200){

  var json = JSON.parse(ajax.responseText);

callback(json)

}

}

}

6.post接收数据和get没有差别，发送数据有差别。Post发送数据封装

function ajaxPost(url,callback,data){

    If(arguments.length == 2){

      Data = null ; //此时不发送数据

}

var ajax = new XMLHttpRequest() ;

ajax.open("POST","url") ;

ajax.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”)  //请求头

    ajax.send(data) ;

     ajax.onreadystatechange = function(){

    if(ajax.readyState == 4 && ajax.status == 200){

   callback(ajax.responseText) ;//获得字符串形式的响应数据}

}

}  

ajaxPost(“http://...”,function(res){

        alert(res)

},”kouling=zmkm”)

7.ajax跨域

（jsonp的应用场景）; 发生跨域问题ajax不能接受或者发送数据的时候;

(jsonp前端应该做什么); 得到一个 接口 ; 动态拼接一个script ; 写一个回调函数;

（后台如何帮你完成jsonp跨域）; (允许访问! => header) 调用你的函数！;

<script type="text/javascript">  

    function jsonpCallback(result) {  

        //alert(result);  

        for(var i in result) {  

            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  

        }  

    }  

    var JSONP=document.createElement("script");  

    JSONP.type="text/javascript";  

    JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";  

    document.getElementsByTagName("head")[0].appendChild(JSONP);  

</script>  

或者：

<script type="text/javascript">  

    function jsonpCallback(result) {  

        alert(result.a);  

        alert(result.b);  

        alert(result.c);  

        for(var i in result) {  

            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  

        }  

    }  

</script>  

<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>  

jquery中实现：

<script type="text/javascript" src="jquery.js"></script>  

<script type="text/javascript">  

    $.getJSON("http://crossdomain.com/services.php?callback=?",  

    function(result) {  

        for(var i in result) {  

            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  

        }  

    });  

</script>  

或者：

<script type="text/javascript">  

    $.ajax({  

        url:"http://crossdomain.com/services.php",  

        dataType:'jsonp',  

        data:'',  

        jsonp:'callback',  

        success:function(result) {  

           for(var i in result) {  

                alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  

            }  

        },  

        timeout:3000  

    });  

</script>  

或者：

<script type="text/javascript">  

    $.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp');  

</script>  

8.两种常用的数据交互的方式：GET，POST

   GET :最简单，轻便，快捷的数据交互方式，数据量限制在2-100k之间，安全性地，通常接收数据

   POST:最复杂，发送数据量比较大，1G以内，安全性高，主要用于发送数据

9.eval( )方法：将字符串转换成JavaScript可以认识的编码；