JS的原生Ajax和jQuery中的Ajax

Ajax简介

Ajax（Asynchhronous Javascript And XML）是指一种创建网页应用的网页开发技术。Ajax通过后台与服务器进行少量的数据交换，可以使网页实现异步更新，创建快速动态网页，无需加载整个页面的情况下，能够更新部分网页技术。Ajax不是一种新的编程语言，它是一种独立于web服务器软件的浏览器技术。

在没有Ajax的时候，客户端提交数据后，会等待服务器返回结果，期间出现假死状态，直到服务器返回结果才会载入新的页面，呈现页面请求结果。而使用Ajax就不会出现假死状态，局部刷新数据而不影响整个页面的呈现和使用，同时客户端也没有等待服务器的返回结果的时间开销，展现出良好的交互性。

Ajax的核心是XMLHttpRequest对象，这是一个Javascript对象。下面是XMLHttpRequest对象的一些方法描述：

接下来我们来看看实现Ajax的两种方式（使用XMLHttpRequest对象做原生代码实现和基于Jquery实现）

　使用XMLHttpRequest对象做原生代码实现:

<body>
    <script type="text/javascript">
        //1实例化 xhr对象
        var xhr = new XMLHttpRequest();
        //2设置请求路径和方法
        xhr.open("GET","http://localhost:63342/WebStorm/老陈中级/day05/apple.txt");
        //3发送请求
        xhr.send()
        //4监听事件
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xhr.readyState)
                console.log(xhr.status)
                console.log(xhr)
                var h1 = document.createElement("h1")
                h1.innerHTML = xhr.responseText;
                document.body.appendChild(h1)
            }
        }

//        //封装
        //1声明一个函数
        function getAajx(httpUrl,fn){
            //实力化对象
            var xhr = new XMLHttpRequest();
            //设置路径和方法
            xhr.open("get",httpUrl);
            //发送请求
            xhr.send();
            //设置监听事件
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4&&xhr.status==200){

                    fn(xhr);
                }
            }
        }
        //调用函数。
        getAajx("http://localhost:63342/WebStorm/老陈中级/day05/apple.txt",function(xhr){
              var h1 = document.createElement("h1");
                h1.innerHTML = xhr.responseText;
                h1.style.color = "red";
                document.body.appendChild(h1);
        })

    </script>

基于jquery：

jQuery是一个快速、简洁的JavaScript框架，它是一个优秀的JavaScript代码库。利用它实现Ajax相对与原生代码实现好使多了。

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $.get('dati.json',function(res){
                console.log(res)
            })
            
            $.ajax({
                url:'dati.json',
                method:"GET",
                success:function(res){
                    console.log(res)
                }
            })
            
            var httpUrl = "https://free-api.heweather.net/s6/weather/now?location=beijing&key=c8b18212397748599a7fb0bfa1022b56"
            var hUrl = "https://free-api.heweather.net/s6/weather/now";
            var loc = "beijing";
            var weatherKey = "c8b18212397748599a7fb0bfa1022b56"
            var data = {
                location:loc,
                key:weatherKey
            }
            
            
//            $.get(httpUrl,function(res){
//                console.log(res)
//            })
            
//            $.get(hUrl,data,function(res){
//                console.log(res)
//            })
            
            $.ajax({
                url:hUrl,
                method:"GET",
                data:data,
                success:function(res){
                    console.log(res)
                }
            })
            
//            function getAjax(httpUrl,fn){
//                //1实例化xhr对象
//                    var xhr = new XMLHttpRequest()
//                //2设置请求的路径和方法
//                    xhr.open("GET",httpUrl);
//                //3发送请求
//                    xhr.send()
//                //4监听事件，接收请求
//                    xhr.onreadystatechange = function(){
//                        if(xhr.readyState==4&&xhr.status==200){
//                            /*console.log(xhr.readyState);
//                            console.log(xhr.status)
//                            console.log(xhr)*/
//                            
//                            fn(xhr)
//                            
//                        }
//                    }
//            }
//            
//            getAjax("dati.json",function(res){
//                console.log(res)
//                res = JSON.parse(res.responseText)
//                console.log(res)
//            })
        </script>
    </body>
</html>

posted @ 2019-07-12 18:38 路黎怪i 阅读(337) 评论(0) 收藏举报

路黎怪i

JS的原生Ajax和jQuery中的Ajax

公告