ajax的原生,伪造和jquery讲解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax的原生,伪造和jquery讲解相关的知识,希望对你有一定的参考价值。

jquery是对Ajax的一个封装,真正的操作是封装里面的内容(基于内部调用原生的Ajax的XMLHTTPRequest)
Ajax还有一种是伪造ajax,所为伪造就是不用XMLHTTPRequest,利用的浏览器的一种技术实现的

XmlHttpRequest对象介绍

XmlHttpRequest对象的主要方法:

 void open(String method,String url,Boolen async)
   用于创建请求

   参数:
       method: 请求方式(字符串类型),如:POST、GET、DELETE...
       url:    要请求的地址(字符串类型)
       async:  是否异步(布尔类型)

b. void send(String body)
    用于发送请求

    参数:
        body: 要发送的数据(字符串类型)

c. void setRequestHeader(String header,String value)
    用于设置请求头

    参数:
        header: 请求头的key(字符串类型)
        vlaue:  请求头的value(字符串类型)

d. String getAllResponseHeaders()
    获取所有响应头

    返回值:
        响应头数据(字符串类型)

e. String getResponseHeader(String header)
    获取响应头中指定header的值

    参数:
        header: 响应头的key(字符串类型)

    返回值:
        响应头中指定的header对应的值

f. void abort()

    终止请求

发送
技术分享图片
监听状态
技术分享图片
技术分享图片
技术分享图片

<body>
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
<input type="button" value="原生提交ajax" onclick="addajax();">
<script>
    function addajax() {
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange=function () {
            if(xhr.readyState==4){
                alert(xhr.responseText)
            }
        }
         xhr.open(‘GET‘,‘/add/?i1=11&i2=13‘);
        xhr.send();
    }
</script>
</body>

技术分享图片
上面的内容是在body里面,后台request.post里面是没有数据的,要有需要添加请求头如下图:
技术分享图片

XmlHttpRequest对象的主要属性:

a. Number readyState
   状态值(整数)

   详细:
      0-未初始化,尚未调用open()方法;
      1-启动,调用了open()方法,未调用send()方法;
      2-发送,已经调用了send()方法,未接收到响应;
      3-接收,已经接收到部分响应数据;
      4-完成,已经接收到全部响应数据;

b. Function onreadystatechange
   当readyState的值改变时自动触发执行其对应的函数(回调函数)

c. String responseText
   服务器返回的数据(字符串类型)

d. XmlDocument responseXML
   服务器返回的数据(Xml对象)

e. Number states
   状态码(整数),如:200、404...

f. String statesText
   状态文本(字符串),如:OK、NotFound...

伪Ajax

iframe是可以伪造的,不会刷新。结合form来提交数据
技术分享图片

填写回调函数
返回来的是放在了iframe里面。如果iframe里面有内容了,说明有返回了。通过onload函数来加载
技术分享图片
取值是不一样的,因为有两个document,需要进入这个对象里面
技术分享图片
技术分享图片
最终的伪造ajax
技术分享图片

以上是关于ajax的原生,伪造和jquery讲解的主要内容,如果未能解决你的问题,请参考以下文章

详解原生Ajax的实现,并模仿JQuery进行封装

求教layui中的ajax请求的讲解

原生 JavaScript 实现 AJAXJSONP

高级前端:详解手写原生Ajax的实现

JQuery+Ajax与服务器端进行交互

6.Ajax技术