首页 > 代码库 > jQuery Ajax -附示例

jQuery Ajax -附示例

2024-09-22 05:41:56   216人阅读

jQuery其实就是一个JavaScript的类库，其将复杂的功能做了上层封装，使得开发者可以在其基础上写更少的代码实现更多的功能。

  • jQuery 不是生产者，而是大自然搬运工。
  • jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject 
  • 注：2.+版本不再支持IE9以下的浏览器

时机：
　　　　如果发送的是【普通数据】 -> jQuery，XMLHttpRequest，iframe

　　　　如果发送的是【文件】 -> iframe,jQuery(FormData对象)，XMLHttpRequest(FormData对象)，

jQuery Ajax方法列表:

jQuery.get(...)
                所有参数：
                     url: 待载入页面的URL地址
                    data: 待发送 Key/value 参数。
                 success: 载入成功时回调函数。
                dataType: 返回内容格式，xml, json,  script, text, html


            jQuery.post(...)
                所有参数：
                     url: 待载入页面的URL地址
                    data: 待发送 Key/value 参数
                 success: 载入成功时回调函数
                dataType: 返回内容格式，xml, json,  script, text, html


            jQuery.getJSON(...)
                所有参数：
                     url: 待载入页面的URL地址
                    data: 待发送 Key/value 参数。
                 success: 载入成功时回调函数。


            jQuery.getScript(...)
                所有参数：
                     url: 待载入页面的URL地址
                    data: 待发送 Key/value 参数。
                 success: 载入成功时回调函数。


            jQuery.ajax(...)

                部分参数：

                        url：请求地址
                       type：请求方式，GET、POST（1.9.0之后用method）
                    headers：请求头
                       data：要发送的数据
                contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
                      async：是否异步
                    timeout：设置请求超时时间（毫秒）

                 beforeSend：发送请求前执行的函数(全局)
                   complete：完成之后执行的回调函数(全局)
                    success：成功之后执行的回调函数(全局)
                      error：失败之后执行的回调函数(全局)
                

                    accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
                   dataType：将服务器端返回的数据转换成指定类型
                                   "xml": 将服务器端返回的内容转换成xml格式
                                  "text": 将服务器端返回的内容转换成普通文本格式
                                  "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
                                "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
                                  "json": 将服务器端返回的内容转换成相应的JavaScript对象
                                 "jsonp": JSONP 格式
                                          使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

                                  如果不指定，jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string

                 converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数
                         $.ajax({
                              accepts: {
                                mycustomtype: ‘application/x-some-custom-type‘
                              },
                              
                              // Expect a `mycustomtype` back from server
                              dataType: ‘mycustomtype‘

                              // Instructions for how to deserialize a `mycustomtype`
                              converters: {
                                ‘text mycustomtype‘: function(result) {
                                  // Do Stuff
                                  return newresult;
                                }
                              },
                            });

基于jQuery Ajax -Deamo

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <p>
        <input type="button" onclick="XmlSendRequest();" value=‘Ajax请求‘ />
    </p>


    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script>

        function JqSendRequest(){
            $.ajax({
                url: "http://c2.com:8000/test/",
                type: ‘GET‘,
                dataType: ‘text‘,
                success: function(data, statusText, xmlHttpRequest){
                    console.log(data);
                }
            })
        }


    </script>
</body>
</html>

跨域Ajax

由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。

特别的：由于同源策略是浏览器的限制，所以请求的发送和响应是可以进行，只不过浏览器不接受罢了。

浏览器同源策略并不是对所有的请求均制约：

  • 制约： XmlHttpRequest
  • 不叼： img、iframe、script等具有src属性的标签

跨域，跨域名访问，如：http://www.c1.com 域名向 http://www.c2.com域名发送请求。

1.JSONP实现跨域请求

JSONP（JSONP - JSON with Padding是JSON的一种“使用模式”)，利用script标签的src属性（浏览器允许script标签跨域）

技术分享 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <p>
        <input type="button" onclick="Jsonp1();"  value=‘提交‘/>
    </p>

    <p>
        <input type="button" onclick="Jsonp2();" value=‘提交‘/>
    </p>

    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script>
        function Jsonp1(){
            var tag = document.createElement(‘script‘);
            tag.src = "http://c2.com:8000/test/";
            document.head.appendChild(tag);
            document.head.removeChild(tag);

        }

        function Jsonp2(){
            $.ajax({
                url: "http://c2.com:8000/test/",
                type: ‘GET‘,
                dataType: ‘JSONP‘,
                success: function(data, statusText, xmlHttpRequest){
                    console.log(data);
                }
            })
        }


    </script>
</body>
</html>

基于JSONP实现跨域Ajax - Demo
基于JSONP实现跨域Ajax - Demo

2.CORS

随着技术的发展，现在的浏览器可以支持主动设置从而允许跨域请求，即：跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求。

* 简单请求 OR 非简单请求

条件：
    1、请求方式：HEAD、GET、POST
    2、请求头信息：
        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type 对应的值是以下三个中的任意一个
                                application/x-www-form-urlencoded
                                multipart/form-data
                                text/plain
 
注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求

 

* 简单请求和非简单请求的区别？

  简单请求：一次请求
非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。

 

* 关于“预检”

- 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”
     => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        Access-Control-Request-Method
     => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        Access-Control-Request-Headers

 前端示例:

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .upload{
            display: inline-block;padding: 10px;
            background-color: brown;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 90;
        }
        .file{
            width: 100px;height: 50px;opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div style="position: relative;width: 100px;height: 50px;">
        <input class="file" type="file" id="fafafa" name="afafaf" />
        <a class="upload">上传</a>
    </div>
    <input type="button" value="提交XHR" onclick="xhrSubmit();" />
    <input type="button" value="提交jQuery" onclick="jqSubmit();" />
    <hr/>

    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
        <input type="file" name="fafafa" onchange="changeUpalod();" />
{#        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>#}
    </form>

    <div id="preview"></div>


    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        //只要加入了文件，就会触发事件，并把整个表单都提交过去。就不用点击submit提交都行！！！！
            //因为在这个函数里面写了submit() 提交表单操作
        //什么时候返回过来，就会执行iframe的load事件，
            //所以在这些绑定了load事件,用户只要一提交，上传成功了，就会把路径(static --这里是在views中做了逻辑处理返回了路径)给你返回来，然后找到这个文件，在放到id=id="preview" 中
            
        function changeUpalod(){
            $(‘#ifm1‘).load(function(){
            //console.log$($(‘#ifm1‘).contents())  这contents 就是它下面的值
            //$(‘#ifm1‘).contents().find(‘body‘).text(); 得到它的文本内容
                var text = $(‘#ifm1‘).contents().find(‘body‘).text();
                var obj = JSON.parse(text);

                $(‘#preview‘).empty();
                var imgTag = document.createElement(‘img‘);
                imgTag.src = "/" + obj.data;
                $(‘#preview‘).append(imgTag);
            });
            $(‘#form1‘).submit(); //找到form1 直接就提交这个表单
        }
        
        
        
        //用ajax发送
        
            //如果用ajax来发送文件,jquery会帮你把文件转换为字符串等等操作.这样就违背了咱传输文件的意图
            //所以需要加2个参数
            // processData: false,  
            // contentType: false, 
            //加上这2个参数，就是告诉jquery，不要帮我做特殊处理.
        function jqSubmit(){
            // $(‘#fafafa‘)[0]
            //你要上传的文件对象  文件只能用这种方式
            var file_obj = document.getElementById(‘fafafa‘).files[0];

            var fd = new FormData();   //相当于是一个form表单
            fd.append(‘username‘,‘root‘);  //前面加KEY，后面加value
            fd.append(‘fafafa‘,file_obj);

            $.ajax({
                url: ‘/upload_file/‘,
                type: ‘POST‘,
                data: fd,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                //success 也就是返回值
                success:function(arg,a1,a2){
                    console.log(arg);
                    console.log(a1);
                    console.log(a2);
                }
            })
        }

            
            
            
            
                    
        //这个是原生的发送
        function xhrSubmit(){
            // $(‘#fafafa‘)[0]
            var file_obj = document.getElementById(‘fafafa‘).files[0];

            var fd = new FormData();
            fd.append(‘username‘,‘root‘);
            fd.append(‘fafafa‘,file_obj);

            var xhr = new XMLHttpRequest();
            xhr.open(‘POST‘, ‘/upload_file/‘,true);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 接收完毕
                    var obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                }
            };
            xhr.send(fd);
        }
         
        //iframe 兼容性最好
        function iframeSubmit(){
            $(‘#ifm1‘).load(function(){
                var text = $(‘#ifm1‘).contents().find(‘body‘).text();
                var obj = JSON.parse(text);

                $(‘#preview‘).empty();
                var imgTag = document.createElement(‘img‘);
                imgTag.src = "/" + obj.data;
                $(‘#preview‘).append(imgTag);
            })
        }

    </script>
</body>
</html>
前端示例

 

转载于:http://www.cnblogs.com/wupeiqi/articles/5703697.html

jQuery Ajax -附示例


联系
我们