本文共 3803 字，大约阅读时间需要 12 分钟。

ajax

1. 概念
   无需加载整个网页（刷新页面）的情况下，能够更新部分网页对的技术。
2. 优点
   （1）无刷新更新数据
   （2）异步与服务器通信，不打断用户的操作
   （3）前后端负载平衡
   （4）前后端分离
3. 缺点
   （1）对搜索引擎支持较弱
   （2）不能很好地支持移动端设备
   （3）没有了back和history功能，即对浏览器机制的破坏
   （4）对IT企业带来了新的安全威胁。

ajax原理

四步

1.创建对象

2.连接服务器

3.发送请求

4.接收返回

    
       
           
通过ajax与服务器建立连接，请求服务器中的abc.txt中的内容
        
   
    

ajax封装1

function ajax(url,fnWin,fnFaild){    //1.创建对象    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiceXObject('Microsoft.XMLHTTP');    //2.与服务器建立联系    xhr.open('GET',url,true);    //3.发送请求    xhr.send();    //4.接收响应    xhr.onreadystatechange = function(){        //判断请求状态码        if(xhr.readyState === 4){            //判断响应状态码            if(xhr.status === 200){                if(fnWin instanceof Function){                    fnWin(xhr.responseText);                }else{                    fnFaild();                }            }        }    }}

ajax封装2

1. 通过get方式访问，信息是携带咋地址栏里面的
   URL路径：‘09访问php.php?name=张三&pwd=123’
2. 通过post方式访问，信息需要单独传递过来
   URL路径：‘09访问php.php’
   信息data：‘name=张三&pwd=123’

let ajax = {    get : function(url,fn){        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');        xhr.open('get',url,true);        xhr.send();        xhr.onreadystatechange = function(){            if(xhr.readyState === 4){                if(xhr.status === 200){                    if(fn instanceof Function){                        fn(xhr.responseText);                    }                }            }        }    },    post : function(url,data,fn){        let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');        xhr.open('post',url,true);        //设置http的请求头        xhr.setRequestHeader('Content-type','Application/x-www-form-urlencoded;charset=utf-8');        xhr.send(data);        xhr.onreadystatechange = function(){            if(xhr.readyState === 4){                if(xhr.status === 200){                    if(fn instanceof Function){                        fn(xhr.responseText);                    }                }            }        }    }}

应用（说明：代码里的ajax（）都是上面封装1的ajax函数）

1.通过ajax请求 .txt 的内容

    
       
           
通过ajax与服务器建立连接，请求服务器中的abc.txt中的内容
        
   
    

01abc.txt

hello

2.ajax缓存问题

浏览器缓存的是URL地址，也就是说当你再次访问一个内容的时候，浏览器会从缓存中找你之前访问的这个内容的URL地址。

URL地址的完整路径： 例如百度： https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=java&rsv_spt=1&oq=java&rsv_pq=9ae87b9e0000af9a&rsv_t=64a2xLPgOIqVeiuTYMJ2vghLIMU2amOkhpFAUsNeIXZ6aMAmwitsrebiPa%2BGy1E8WWZa&rqlang=cn&rsv_enter=0&rsv_sug3=1&rsv_sug1=1&rsv_sug7=100&rsv_sug4=1395 httrs:// 协议 www.baidu.com 主机（host） s 路径 上面的内容确定了，就能确定是百度的地址 ？后面是参数，不影响网址 也就是说我们在设置URL路径的时候可以每次都给问号（？）后面一个不一样的内容，这样就能保证每次访问的但都不是同一个URL了。

即：设置url?key=时间戳

‘abc.txt?y=’ + new Date().getTime()

    
       
           
通过ajax与服务器建立连接，请求服务器中的abc.txt中的内容
        
   
        

3.ajax乱码问题

统一字符编码集为utf-8

4ajax访问数组

URL路径：‘04arr.json?y=’ + new Date().getTime()

04arr.json 里面的内容：[1,2,3,4]

    
       
           
通过ajax与服务器建立连接，请求服务器中的abc.txt中的内容
        
   
        

5.ajax解析json字符串

三种方法：

1. eval（） 有风险
2. parse 有兼容
3. new Function(‘return’ + 解析的字符串)

6.ajax解析json对象

URL路径：‘06json.json?y=’ + new Date().getTime()

里面的内容为 { “name” : “张三”, “age” : 18 }

    
       
           
通过ajax与服务器建立连接，请求服务器中的abc.txt中的内容
        
   
        

7.ajax实现分页效果

    
       
           
   
    1    2    3        

点击1,2,3的时候，上面的内容会切换。

8.委托实现分页

URL路径 ： ‘07page’ + target.innerText + ‘.json?y’ + new Date().getTime()

07page’ + target.innerText ：点击1的时候，target.innerText为1；点击2…target.innerText为2………，然后分别呈现里面的内容。

    
       
           
   
    1    2    3        

9.访问php （这里调用的是ajax封装2的函数）

1. 通过get方式访问，信息是携带咋地址栏里面的
   URL路径：‘09访问php.php?name=张三&pwd=123’
2. 通过post方式访问，信息需要单独传递过来
   URL路径：‘09访问php.php’
   信息data：‘name=张三&pwd=123’

转载地址：http://dtqzi.baihongyu.com/