您的位置：首页 > 其它

ajax入门

2017-08-28 13:05 176 查看

ajax背景



2005一个人发表了该文章Ajax：AnewApproachtoWebApplacations

ajax:AsynchronousJavaScriptandxml

初始是微软在推出IE5时就开始支持ajax的核心技术，但ajax的推行是由chrome完成的

使用ajax无需刷新页面即可部分改变页面内容，是浏览器之前需要刷新页面更新数据的变革


ajax包含的技术



使用css和HTML来表示（请求到的数据用html和css展示出来）

使用DOM模型来交互和动态显示（请求到的数据用dom操作处理之后动态展示）

使用XMLHttpRequest来和服务器进行异步通信

使用javascript来绑定和调用


ajax优点



页面无刷新，在页面内与服务器通信，给用户的体验非常好。

使用异步的形式与服务器通信，不需要打断用户的操作，给用户的体验更好。

减轻服务器负担

不需要任何的插件或者小程序


ajax缺点



不支持浏览器的后退机制。(回退后找不到之前的数据)

安全问题，跨站点脚本攻击、sqi注入攻击(比如12306购票网站的最初构建不好，导致各种抢票脚本、抢票软件的出现，简单的几行js代码即可实现后台抢票)

对搜索引擎的支持比较弱（SEO）

不支持手持设备如pad、手机

违背了url和资源定位的初衷（最初一个url对应的页面和资源一定是这样的，但用ajax后同样的url对应的页面和资源就有可能变化，就是因为ajax的异步请求造成的）


Ajax原理和XMLHttpRequest对象



Ajax的原理简单来说，就是通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。


XMLHttpRequest最核心！！！

XMLHttpRequest的属性:

onreadystatechange　　每次状态改变所触发事件的事件处理程序。

responseText　　从服务器进程返回数据的字符串形式。

responseXML　　从服务器进程返回的DOM兼容的文档数据对象。

status　　从服务器返回的数字代码，比如常见的404或者200

statusText伴随状态码的字符串信息

readyState对象状态值

0（未初始化）对象已建立，但是尚未初始化（尚未调用open方法）

1（初始化）对象已经初始化（尚未调用send方法）

2（发送数据）（send方法已经调用）

3（数据传输中）

4（完成）

XMLHttpRequest的方法：

open()　　三个参数

打开方式　　get和post

地址

是否异步true代表要使用异步的形式，false代表的是使用同步


ajax封装



//封装好的Ajax：打开方式地址是否异步回调函数提交数据
functionAjax(method,address,flag,callBacks,data){
varxhr=null;
if(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}else{
xhr=newActiveXObject('Microsoft.XMLHTTP');
}
if(method=='get'){
xhr.open('get',address,flag);
xhr.send();
}elseif(method=='post'){
xhr.open('post',address,flag);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(data);
}

xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
callBacks(xhr.responseText);
}else{
alert('出错了,Err：'+xhr.status);
}
}

}
}



                                            
                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                
            

            

                
相关文章推荐

                

                

                    
                

            

        
        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航