Web前端之路程序员技术干货

JavaScript本来就很简单(神说ajax)

2017-09-24  本文已影响370人  苗泽云

js中的ajax

ajax:异步的JavaScript和XML,首先它是一门用于前后台数据交互的技术,这里有两个比较有趣的概念(同步与异步)说白了就是后台传回来的数据,同步的话,你必须刷新页面才能更新数据,而异步更新的话,可以在不刷新页面的情况下,实现页面数据的更新


ajax的好处:举个简单的例子,表单验证,在ajax技术出现之前,咱们都是把表单填写完成,然后提交给后台进行验证,后台如果发现有一个表单填写的不符合规范,就会将数据返回给前台,前台刷新页面重新填写,所以的表单都得重新填写,这样就很气知道吗?很气!!! 后来就有了ajax,你可以填完一个然后ajax就会跑到后台去验证,验证完了,然后再跑回来告诉你,填写的行不行,要求重新填写,而且还不用刷新页面,,哈哈,是不是很厉害呢


ajax说白了就是前台和后台之间数据传递的一门技术,再往白了说,就是跑腿的,假如前台页面需要一个数据了,好,ajax你去后台跑一趟,把数据给我取回来,然后ajax就去了,后台给了它一串数据,最后跑回来了,把数据给了我们前台。这个过程其实特别简单,ajax的一个关键就是,他取数据的这个过程,咱们前台该干嘛还是干嘛,并不影响,也就是说相当于开辟了两个空间,一个空间继续做你该做的事,另一个空间去取数据,ajax去取数据,其他人毫不影响,而且取回来直接就可以用,不用刷新页面,或者说的更准确一点,实现局部刷新


ajax具体实现方式

var xhr ;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();//现代浏览器实例化ajax对象方式
        }else{
            xhr = new ActiveXObject('Microsoft.XMLHTTP'); //IE浏览器实例化ajax对象方式

        }
//这里进行的是针对IE浏览器的兼容性处理,在IE中,我们的XMLHttpRequest对象就变成了ActiveXObject,而且里边的参数是不能少的

get与 post的区别:都是给后台提交数据的方式,区别就是get提交的时候把数据放到请求地址的后面,这样就会很不安全,大家都可以看到、而post提交的数据会进行加密,所以比较安全,get传递的数据量比较少,post传递的数据量比较大


我们发送了ajax请求,但是我们并不知道是否发送成功了并且服务器是否处理了我们的请求,以及是否返回给我们前台,这儿就需要用到一个东西,可以让我们很好的检测ajax请求的过程

xhr.onreadystatechange = function(){
     if(xhr.readystate == 4){//请求已经成功被处理
         if(xhr.status == 200){//成功的从服务器得到了响应
             //这里进行处理返回的数据
        }
    }
}

ajax在jQuery中的应用

$.ajax({
                    type:"post",  //请求方式
                    url:"a.php", //服务器的链接地址
                    dataType:"json", //传送和接受数据的格式
                    data:{
                        username:"james",
                        password:"123456"
                    },
                    success:function(data){//接受数据成功时调用的函数
                       console.log(data);//data为服务器返回的数据
                    },
                    error:function(request){//请求数据失败时调用的函数
                        alert("发生错误:"+request.status);
                    }
});

本文有不完善的地方,希望大家评论指正,本文首发于csdn博客喜欢的可以去点个赞,谢谢大家

上一篇 下一篇

猜你喜欢

热点阅读