关于ajax:WEB前端四Ajax

28次阅读

共计 7551 个字符，预计需要花费 19 分钟才能阅读完成。

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 用双引号括，多个用逗号隔开，最初一个没有逗号

网页实现部分刷新


技术栈：
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)

正文完
ajax
发表至： ajax
2020-10-25
 0
关于ajax:Ajax技术在Jquery中的应用
关于ajax:记录Ajax请求报415与404问题
关于ajax:SpringBootAjax的使用
关于ajax:ajax回掉函数封装共性的详解