ajax和跨域

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了ajax和跨域，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

<table style="height: 30px; background-color: #afeeee; width: 1266px; ; width: 1266px;" border="0"><tr>
<td><span style="font-size: 16px;">一、简介</td>
</tr></table>

ajax是什么？@H_502_6@

AJAX（Asynchronous JavaScript and XML） 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX， (异步的JavaScript和XML)，一种创建交互式网页应用的网页开发技术方案。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

ajax依赖XMLHttpRequest 对象@H_502_6@

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，而ajax刚好依赖他，老版本得浏览器不支持的话需使用ActiveXObject。

二、原生ajaxAjax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）

XmlHttpRequest对象的方法和参数：@H_502_6@
a. 参数：
method： 请求方式（字符串类型），如：POST、GET、DELETE...
url： 要请求的地址（字符串类型）
async： 是否异步（布尔类型）

b. <span style="color: #0000ff;">void<span style="color: #000000;"> send(String body)
用于发送请求

参数：
    body： 要发送的数据（字符串类型）

c. <span style="color: #0000ff;">void<span style="color: #000000;"> setRequestHeader(String header,String value)
用于设置请求头

参数：
    header： 请求头的key（字符串类型）
    vlaue：  请求头的value（字符串类型）

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

返回值：
    响应头数据（字符串类型）

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

参数：
    header： 响应头的key（字符串类型）

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

f. <span style="color: #0000ff;">void<span style="color: #000000;"> abort()

终止请求</span></pre>

XmlHttpRequest对象主要属性：@H_502_6@
详细：
0-<span style="color: #000000;">未初始化，尚未调用open()方法；
1-<span style="color: #000000;">启动，调用了open()方法，未调用send()方法；
2-<span style="color: #000000;">发送，已经调用了send()方法，未接收到响应；
3-<span style="color: #000000;">接收，已经接收到部分响应数据；
4-<span style="color: #000000;">完成，已经接收到全部响应数据；

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

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

d. XmlDocument responseXML
服务器返回的数据（Xml对象）

e. Number states
服务端返回的状态码（整数），如：200、404<span style="color: #000000;">...

f. String statesText
服务端返回的状态文本（字符串），如：OK、NotFound...

 使用样例@H_502_6@
Meta charset="UTF-8"> 
<h1>XMLHttpRequest - Ajax请求</h1>
<input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
<input type="button" onclick="XmlPostRequest();" value="Post发送请求" />

<script src="/statics/jquery-1.12.4.js"&gt;</script>
<script type="text/javascript"&gt;

    <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; GetXHR(){
        </span><span style="color: #0000ff;"&gt;var</span> xhr = <span style="color: #0000ff;"&gt;null</span><span style="color: #000000;"&gt;;
        </span><span style="color: #0000ff;"&gt;if</span><span style="color: #000000;"&gt;(XMLHttpRequest){
            xhr </span>= <span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; XMLHttpRequest();
        }</span><span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt;{
            xhr </span>= <span style="color: #0000ff;"&gt;new</span> ActiveXObject("Microsoft.XMLHTTP"<span style="color: #000000;"&gt;);
        }
        </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; xhr;

    }</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;兼容浏览器设置</span>

    <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; XhrPostRequest(){
        </span><span style="color: #0000ff;"&gt;var</span> xhr =<span style="color: #000000;"&gt; GetXHR();
        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 定义回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a></span>
        xhr.onreadystatechange = <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){
            </span><span style="color: #0000ff;"&gt;if</span>(xhr.readyState == 4<span style="color: #000000;"&gt;){
                </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 已经接收到全部响应数据，执行以下操作</span>
                <span style="color: #0000ff;"&gt;var</span> data =<span style="color: #000000;"&gt; xhr.responseText;
                console.log(data);
            }
        };
        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 指定连接方式和地址----<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>方式</span>
        xhr.open('POST',"/test/",<span style="color: #0000ff;"&gt;true</span><span style="color: #000000;"&gt;);
        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 设置请求头，原因是django中会按照这种请求头解析，不然收不到数据</span>
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8'<span style="color: #000000;"&gt;);
        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 发送请求</span>
        xhr.send('n1=1;n2=2;'<span style="color: #000000;"&gt;);
    }

    </span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; XhrGetRequest(){
        </span><span style="color: #0000ff;"&gt;var</span> xhr =<span style="color: #000000;"&gt; GetXHR();
        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 定义回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a></span>
        xhr.onreadystatechange = <span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){
            </span><span style="color: #0000ff;"&gt;if</span>(xhr.readyState == 4<span style="color: #000000;"&gt;){
                </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 已经接收到全部响应数据，执行以下操作</span>
                <span style="color: #0000ff;"&gt;var</span> data = xhr.responseText;<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>字符串类型返回的数据</span>

<span style="color: #000000;"> console.log(data);
}
};
<span style="color: #008000;">//<span style="color: #008000;"> 指定连接方式和地址----文件方式
xhr.open('get',<span style="color: #0000ff;">true<span style="color: #000000;">);
<span style="color: #008000;">//<span style="color: #008000;"> 发送请求
<span style="color: #000000;"> xhr.send();
}

</span></script>

二、jquery中的ajaxjquery中的ajax本质上是对javascript的ajax进行封装，所以实质还是XMLHttpRequest对象。

jquery中ajax的方法：@H_502_6@
页面的URL地址 data: 待发送 Key/value 参数。 函数。 dataType: 返回内容格式，xml,json,script,text,html 
        jQuery.post(...)
            所有参数：
                 url: 待载入<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>的<a href="https://www.jb51.cc/tag/URLdizhi/" target="_blank" class="keywords">URL地址</a>
                data: 待发送 Key</span>/value 参数

<span style="color: #000000;"> success: 载入成功时回调函数
dataType: 返回内容格式，xml,html

        jQuery.getJSON(...)
            所有参数：
                 url: 待载入<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>的<a href="https://www.jb51.cc/tag/URLdizhi/" target="_blank" class="keywords">URL地址</a>
                data: 待发送 Key</span>/value 参数。

<span style="color: #000000;"> success: 载入成功时回调函数。

        jQuery.getScript(...)
            所有参数：
                 url: 待载入<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>的<a href="https://www.jb51.cc/tag/URLdizhi/" target="_blank" class="keywords">URL地址</a>
                data: 待发送 Key</span>/value 参数。

<span style="color: #000000;"> success: 载入成功时回调函数。

        jQuery.ajax(...)

            部分参数：

                    url：请求地址
                   type：请求方式，GET、POST（</span>1.9<span style="color: #000000;"&gt;.0之后用method）
                headers：请求头
                   data：要发送的数据
            contentType：即将发送信息至服务器的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>编码类型(默认: </span>"application/x-www-form-urlencoded; charset=UTF-8"<span style="color: #000000;"&gt;)
                  async：是否异步
                timeout：设置请求超时时间（毫秒）

             beforeSend：发送请求前执行的<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>(全局)
               complete：完成之<a href="https://www.jb51.cc/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>(全局)
                success：成功之<a href="https://www.jb51.cc/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>(全局)
                  error：失败之<a href="https://www.jb51.cc/tag/houzhixing/" target="_blank" class="keywords">后执行</a>的回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>(全局)


                accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
               dataType：将服务器端返回的数据转换成指定类型
                               </span>"xml"<span style="color: #000000;"&gt;: 将服务器端返回的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>转换成xml格式
                              </span>"text"<span style="color: #000000;"&gt;: 将服务器端返回的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>转换成普通文本格式
                              </span>"html"<span style="color: #000000;"&gt;: 将服务器端返回的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>转换成普通文本格式，在插入DOM中时，如果包含JavaScript<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>，则会尝试去执行。
                            </span>"script"<span style="color: #000000;"&gt;: 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>转换成普通文本格式
                              </span>"json"<span style="color: #000000;"&gt;: 将服务器端返回的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>转换成相应的JavaScript对象
                             </span>"jsonp"<span style="color: #000000;"&gt;: JSONP 格式
                                      使用 JSONP 形式<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a><a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>时，如 </span>"myurl?callback=?" jQuery 将<a href="https://www.jb51.cc/tag/zidongtihuan/" target="_blank" class="keywords">自动替换</a> ?<span style="color: #000000;"&gt; 为正确的<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>名，以执行回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>

                              如果不指定，jQuery 将<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML,</span><span style="color: #0000ff;"&gt;in</span> 1.4 JSON will yield a JavaScript object,<span style="color: #0000ff;"&gt;in</span> 1.4 script will execute the script,and anything <span style="color: #0000ff;"&gt;else</span><span style="color: #000000;"&gt; will be returned as a string

             converters： 转换器，将服务器端的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>根据指定的dataType转换类型，并传值给success回调<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>
                     $.ajax({
                          accepts: {
                            mycustomtype: </span>'application/x-some-custom-type'<span style="color: #000000;"&gt;
                          },</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; Expect a `mycustomtype` back from server</span>
                          dataType: 'mycustomtype'

                          <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; Instructions for how to deserialize a `mycustomtype`</span>

<span style="color: #000000;"> converters: {
'text mycustomtype': <span style="color: #0000ff;">function<span style="color: #000000;">(result) {
<span style="color: #008000;">//<span style="color: #008000;"> Do Stuff
<span style="color: #0000ff;">return<span style="color: #000000;"> newresult;
}
},});

Django发送ajax请求示例：

更多请参考：http://jquery.cuishifeng.cn/jQuery.Ajax.html

1.JSONP跨域@H_502_6@

简介：

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作