WEB前端(四)--Ajax

禾白少二

Ajax

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的技术。早期只有同步的方式,多个请求,只能顺序执行,只能等待执行。有了ajax异步技术,可以无需等待上一个请求执行完成,就可以直接发起请求。服务端返回后,ajax通过回调技术通知客户端程序,把响应的结果传递给用户事先写好的回调函数。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页进行局部更新,提升网页的效率,用户无需等待页面的刷新,嗖的一下内容就变化了。改变原有整个页面刷新,造成页面晃眼的现象。所以这项技术一出现,就得到业界的推崇。
关键字:异步、回调、局部刷新。

XHR对象:

XMLHttpRequest对象方法如下:
about()   停止当前的请求。
getAllResponseHeaders()   把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")  返回指定首部的串值
open("method","URL",[asyncFlag]) :建立对服务器的调用。method参数可以是GET、POST。url参数可以是相对URL或绝对URL。这个方法还包括可选的参数,是否异步(true或者false)。
send(content) 向服务器发送请求。send接收一个参数,即作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入null,因为这个参数对有些浏览器来说是必须的。调用send()之后,请求就会分派到服务器。
setRequestHeader("header", "value"): 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

XMLHttpRequest 对象属性描述:

onreadystatechange:状态改变的事件触发器,每个状态改变时都会触发这个事件处理器.
readyState:  请求的状态。有5个可取值:

  • 0: 未初始化。尚未调用open()方法。
  • 1:启动。已经调用open()方法,但尚未调用send()方法。
  • 2:发送。已经调用send()方法,readyState上面的值就是HEADERS_RECEIVED,已经发送并且已经接收到响应头和响应状态了
  • 3:接收。已经接收到部分相应数据。
  • 4:完成。已经接收到全部相应数据,而且已经可以在客户端使用了。

responseText: 服务器的响应,返回数据的文本。
responseXML:服务器的响应,返回数据的兼容DOM的XML文档对象 ,这个对象可以解析为一个DOM对象。
status:服务器的HTTP状态码(如:404 = "文件末找到" 、200 ="成功" ,等等)
statusText: 服务器返回的状态文本信息 ,HTTP状态码的相应文本(OK或Not Found(未找到)等等。

Json

JSON(JavaScript Object Notation, JS 对象简谱) 起名不咋地,非常拗口,我们就记住它是一种轻量级的数据交换格式即可。它基于 ECMAScript (js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者,成为主流开发方式(ajax异步请求,json返回)。
关键字:ES标准、JSON、XML
例京东网页获取一个商品信息:

[{"cbf":"0","id":"J_100003717483","m":"10000.00","op":"2499.00","p":"2099.00"}]

结构特点:

  • 数组[]
  • 一条记录{},多条记录用逗号隔开 {},{},最后一条没有逗号
  • 键值对 "p":"2099.00",kv用双引号括,多个用逗号隔开,最后一个没有逗号

网页实现局部刷新

image
技术栈:
javascript、jQuery、http协议(请求request、响应response)、Web中间件(tomcat)、mysql数据库,json传输。

实现Ajax

原生js实现Ajax

  • 创建XHR对象
  • 设置状态监听
  • 建立与服务端的连接
  • 发送请求

GET请求:

<script>
    //js当中排错的方式:断点(debugger),console.log,排除法
    function doAjaxGet(){//这个方法运行与浏览器进程内部的主线程(main)中
        debugger;
        //1.创建XHR对象(此对象时ajax技术应用的入口对象,发送异步请求,处理响应结果都是通过此对象实现)
        var xhr=new XMLHttpRequest();
        //2.设置状态监听
        xhr.onreadystatechange=function (){//事件监听函数(处理客户端与服务端通过过程产生的数据)
            if(xhr.readyState==4&&xhr.status==200){
                //readyState的值0,1,2,3,4
                //0,表示还未执行open方法
                //1,表示已执行open方法但还未执行send方法
                //2,表示已执行send方法
                //3,表示客户端正在接收服务端响应的数据
                //4,表示客户端已经完成响应数据的接收
                //xhr.status==200表示服务端处理过程时OK的
                var result=xhr.responseText;//获取服务端响应的文本数据
                document.getElementById("resultId").innerHTML=result;
            }
        };
        //3.建立与服务端的连接
        xhr.open("GET","http://127.0.0.1/doAjaxGet",true);//true代表异步请求;false代表同步请求
        //127.0.0.1 可能存在跨域问题 需要在控制层加注解@CrossOrigin
        //4.发送请求
        xhr.send(null);//将请求交给ajax引擎
        console.log("do other ....");//run main thread
    }
</script>

POST请求:

<script>
    function doSave(){//发送异步请求,检查name是否存在
        //1.创建xhr对象(Ajax技术应用的入口)
        let xhr=new XMLHttpRequest();
        //2.设置状态监听(不是必须的,但是假如要获取服务端响应的结果并进行处理就要进行状态监听)
        xhr.onreadystatechange=function (){
            if (xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";
            }
        };
        //3.建立POST连接(POST请求传参数,不将参数拼接到url中)
        let name=document.forms[0].name.value;//获取表单中name对应的value属性值
        let name1=document.forms[0].name.value;console.log("name",name);
        let url="http://localhost/doSave1";
        xhr.open("POST",url,true);
        //post请求假如需要像服务端传递参数,则必须在open之后设置请求头
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //4.发送异步请求(通过send() 传参)
        // xhr.send("name="+name);
        xhr.send(`name=${name}&name1=${name1}`);
        // xxx?a=abc&b=bcd
    }
</script>

将请求函数封装,使用时引入js即可

js文件:

function doAjaxGet(url,params,callback){
    debugger;
    //1.创建xhr对象(Ajax技术应用的入口)
    let xhr=new XMLHttpRequest();
    //2.设置状态监听(不是必须的,但是假如要获取服务端响应的结果并进行处理就要进行状态监听)
    xhr.onreadystatechange=function (){
        if (xhr.readyState==4&&xhr.status==200){
            callback(xhr.responseText);
        }
    };
    //3.建立Get连接(get请求传参数,要将参数拼接到url中)
    xhr.open("GET",`${url}?${params}`,true);
    //4.发送异步请求
    xhr.send(null);
};
function doAjaxPost(url,params,callback){//封装共性,提取特性(可能会经常变化的)
    debugger;
    //1.创建xhr对象(Ajax技术应用的入口)
    let xhr=new XMLHttpRequest();
    //2.设置状态监听(不是必须的,但是假如要获取服务端响应的结果并进行处理就要进行状态监听)
    xhr.onreadystatechange=function (){
        if (xhr.readyState==4&&xhr.status==200){
            //callback是形参,接收一个函数,通过这个有参函数去回调这个函数中的具体函数体
            callback(xhr.responseText);//处理响应响应数据
        }
    };
    //3.建立POST连接(POST请求传参数,不将参数拼接到url中)
    xhr.open("POST",url,true);
    //post请求假如需要像服务端传递参数,则必须在open之后设置请求头
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //4.发送异步请求(通过send() 传参)
    xhr.send(params/*{"name":'zh',"age":20}*/);
};

引入js调用:

<script src="js/ajax.js"></script>
<script>
    function doSave(){//发送异步请求,检查name是否存在
        debugger;
        //1.定义请求url
        let url="http://localhost/doSave";
        //2.定义请求参数
        let name=document.forms[0].name.value;
        let params=`name=${name}`;
        //3.发送一部请求并处理响应结果
        doAjaxPost(
            url,
            params,
            function (result){
                document.getElementById("result").innerText=result;
            }
            //这一整个函数是一个参数,传递过去执行
            )
    };
    function doCheck(){//发送异步请求,检查name是否存在
        debugger;
        //1.顶以请求url
        let url="http://localhost/doCheck";//通过模板字符串``和${}表示拼接url
        //2.定义请求参数
        let name=document.forms[0].name.value;//获取表单中name对应的value属性值
        let params=`name=${name}`;
        // let params=`name=${name}&name1=${name1}`;
        //3.发送异步请求并处理响应结果
        doAjaxGet(url,params,function (result){
            document.getElementById("result").innerHTML=result;
        })//底层还是借助XmlHttpRequest对象发送请求
    }
</script>

模拟jQuery封装

使用函数自调用,提供访问对象

(function (){
    var ajax=function (){}
    ajax.prototype={
        doGet:function (url,params,callback){
            let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if (xhr.readyState==4&&xhr.status==200){
                    callback(xhr.responseText);
                }
            };
            xhr.open("GET",`${url}?${params}`,true);
            xhr.send(null);
        },
        doPost:function(url,params,callback){
            let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if (xhr.readyState==4&&xhr.status==200){
                    callback(xhr.responseText);
                }
            };
            xhr.open("POST",url,true);
            xhr.send(`${params}`);
        }
    }
    window.Ajax=new ajax()
})()

调用js:

<script src="js/ajax2.0.js"></script>
<script>
    function doSave(){//发送异步请求,检查name是否存在
        debugger;
        //1.定义请求url
        let url="http://localhost/doSave";
        //2.定义请求参数
        let name=document.forms[0].name.value;
        let params=`name=${name}`;
        //3.发送一部请求并处理响应结果
        Ajax.doPost(url, params, function (result){
                document.getElementById("result").innerText=result;
            }
            //这一整个函数是一个参数,传递过去执行
            )
    };
    function doCheck(){//发送异步请求,检查name是否存在
        debugger;
        //1.顶以请求url
        let url="http://localhost/doCheck";//通过模板字符串``和${}表示拼接url
        //2.定义请求参数
        let name=document.forms[0].name.value;//获取表单中name对应的value属性值
        let params=`name=${name}`;
        // let params=`name=${name}&name1=${name1}`;
        //3.发送异步请求并处理响应结果
        Ajax.doGet(url,params,function (result){
            document.getElementById("result").innerHTML=result;
        })//底层还是借助XmlHttpRequest对象发送请求
    }
</script>

jQuery实现Ajax

<script>
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "https://p.3.cn/prices/mgets",
            contentType: "application/json;charset=utf-8",
            data: {        //拼接的参数
                "skuIds": "J_100003717483"
            },
            dataType: "jsonp",
            success: function(data) {    //返回的结果            
                $('#rtnData').text("返回数据:" + JSON.stringify(data));
                $('#itemId').text("商品编号:" + data[0].id);
                $('#itemPrice').html("商品价格:<span style='color:red'>" + data[0].p +"</span>");
            },
            error: function(data) {
                alert("提交失败" + JSON.stringify(data));
            }
        });
    });
</script>

Vue实现Ajax

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script type="text/javascript">
    var config={
        el:"#app",
        data:{
            goodsList:[],
        },
        mounted:function (){
            this.selectAll();
        },
        methods:{
            selectAll:function (){
                var serverUrl="/goods/doGoodsUI";
                axios.get(serverUrl).then(function (res) {
                    this.vue.goodsList=res.data;
                }).catch();
            },
            deleteById:function (id){
              var serverUrl="/goods/doDeleteById/"+id;
              axios.get(serverUrl).then(function (res) {
                  window.alert(res.data);
                  this.vue.selectAll();
              }).catch();
            },
        },
    };
    var vue = new Vue(config);
</script>

扩展

json和jsonp的区别

json请求返回就是json格式,而jsonp请求返回是fun(json)格式。

json和js对象的区别

json字符串: { "id":"100","name":"tony","salary":"30000" }
js对象:{ "id":100,"name":"tony","salary":30000 }

  • 含义不同,json是一种数据格式,js表示类的实例
  • 传输:json用于跨平台、跨网络传输,速度快;js不能传输
  • 展现:json键值对方式,值是字符串不能是对象方法函数;js值不一定加双引号,值可以是对象、函数、字符串等
  • 转换:JSON.parse(jsonStr) JSON已经作为浏览器内置对象,eval(json);JSON.stringify(obj)
阅读 536
36 声望
22 粉丝
0 条评论
36 声望
22 粉丝
文章目录
宣传栏