AJAX笔记

Posted 圣耀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX笔记相关的知识,希望对你有一定的参考价值。

1、AJAX即“Asynchronous javascript and XML”(异步的JavaScript与XML技术)。

AJAX的核心是XMLHttpRequest,完整的ajax请求过程:

1、创建xmlHttpRequest对象,它是Javascript对象,拥有处理浏览器与服务器间数据交互所要用到的属性和方法,主流浏览器都支持IE支持Activex
2、open()初始化对象
3、send()发送到服务器
4、ready state跟踪状态 
 
JSON:javascript对象表示法,请求常用数据返回格式;

JSON是存储和交换文本信息的语法,类似XML。它采用键值对的方式来组织,易于人们阅读和编写,同时也易于机器解析和生成。

JSON是独立于语言的,也就是说不管什么语言,都可以解析JSON,只需要按照JSON的规则来就行。

JSON的长度和xml格式比起来很短小,JSON的读写速度更快;

JSON可以使用javascript内建的方法直接进行解析,转换成javascript对象,非常方便。 

2、JSONP:

由于浏览器同源策略,当协议、子域名、主域名、端口号中的任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算做跨域。Javascript出于安全方面的考虑,不允许跨域调用其他页面的对象。jsonp可用于解决主流浏览器的跨域数据访问的问题。

当跨域请求时,一般都会看到这个错误:
XMLHttpRequest cannot load http://xxx.com/xx/. No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘http://localhost‘ is therefore not allowed access.

JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特性,由其 src 属性发送请求到服务器,服务器返回 JavaScript 代码,浏览器接受响应,然后就直接执行了,这和通过 script 标签引用外部文件的原理是一样的。
JSONP由两部分组成:回调函数数据,回调函数一般是在浏览器控制,作为参数发往服务器端(当然,你也可以固定回调函数的名字,但客户端和服务器端的名称一定要一致)。当服务器响应时,服务器端就会把该函数和数据拼成字符串返回。  

JSONP的请求过程:
  • 请求阶段:浏览器创建一个 script 标签,并给其src 赋值(类似 http://example.com/api/?callback=jsonpCallback)。
  • 发送请求:当给scriptsrc赋值时,浏览器就会发起一个请求。
  • 数据响应:服务端将要返回的数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback({name: ‘abc‘})”)返回。当浏览器接收到了响应数据,由于发起请求的是 script,所以相当于直接调用 jsonpCallback 方法,并且传入了一个参数。
因为 script 标签的 src 属性只在第一次设置的时候起作用,导致 script 标签没法重用,所以每次完成操作之后要移除;
3、封装ajax() 方法
function ajax(params) {
    params = params || {};
    params.data = params.data || {};
    var json = params.jsonp ? jsonp(params) : json(params);
    // ajax请求
    function json(params) {
        params.type = (params.type || GET).toUpperCase();
        params.data = formatParams(params.data);
        var xhr = null;

        // 实例化XMLHttpRequest对象
        if(window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            // IE6及其以下版本
            xhr = new ActiveXObjcet(Microsoft.XMLHTTP);
        };

        // 监听事件
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                var status = xhr.status;
                if(status >= 200 && status < 300) {
                    var response = ‘‘;
                    var type = xhr.getResponseHeader(Content-type);
                    if(type.indexOf(xml) !== -1 && xhr.responseXML) {
                        response = xhr.responseXML; //Document对象响应
                    } else if(type === application/json) {
                        response = JSON.parse(xhr.responseText); //JSON响应
                    } else {
                        response = xhr.responseText; //字符串响应
                    };
                    params.success && params.success(response);
                } else {
                    params.error && params.error(status);
                }
            }
        };

        // 连接和传输数据
        if(params.type == GET) {
            xhr.open(params.type, params.url + ? + params.data, true);
            xhr.send(null);
        } else {
            xhr.open(params.type, params.url, true);
            //设置提交时的内容类型
            xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded; charset=UTF-8);
            xhr.send(params.data);
        }
    }

    // jsonp请求
    function jsonp(params) {
        //创建script标签并加入到页面中
        var callbackName = params.jsonp;
        var head = document.getElementsByTagName(head)[0];
        // 设置传递给后台的回调参数名
        params.data[callback] = callbackName;
        var data = formatParams(params.data);
        var script = document.createElement(script);
        head.appendChild(script);

        //创建jsonp回调函数
        window[callbackName] = function(json) {
            head.removeChild(script);
            clearTimeout(script.timer);
            window[callbackName] = null;
            params.success && params.success(json);
        };

        //发送请求
        script.src = params.url + ? + data;

        //超时处理
        if(params.time) {
            script.timer = setTimeout(function() {
                window[callbackName] = null;
                head.removeChild(script);
                params.error && params.error({
                    message: 超时
                });
            }, time);
        }
    };
    //格式化参数
    function formatParams(data) {
        var arr = [];
        for(var name in data) {
            arr.push(encodeURIComponent(name) + = + encodeURIComponent(data[name]));
        };
        // 添加一个随机数,防止缓存
        arr.push(v= + random());
        return arr.join(&);
    }
    // 获取随机数
    function random() {
        return Math.floor(Math.random() * 10000 + 500);
    }
}

模拟请求

       ajax({
                url: ‘test.php,
                type: GET,
                data: {intro: get请求},
                success:function(res){
                    res = JSON.parse(res);
                    document.getElementById(a).innerhtml = res.intro;
                    console.log(res);
                }
            });
        ajax({
                url: test.php,
                type: POST,
                data: {intro: post请求},
                success:function(res){
                    res = JSON.parse(res);
                    document.getElementById(b).innerHTML = res.intro;
                    console.log(res);
                }
            });
        ajax({
                url: test.php,
                jsonp: jsonpCallback,
                data: {intro: jsonp请求},
                success:function(res){
                    document.getElementById(c).innerHTML = res.intro;
                    console.log(res);
                }
            });

4、jquery.ajax()参数

type:请求方式 GET/POST
 
url:请求地址
 
async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步。
 
dataType:返回的数据类型
 
jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
 
jsonpCallback:自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
 
success:调用成功执行的函数
 
error:异常处理函数

 

以上是关于AJAX笔记的主要内容,如果未能解决你的问题,请参考以下文章

vuejs学习笔记--属性,事件绑定,ajax

vuejs学习笔记--属性,事件绑定,ajax

vuejs学习笔记--属性,事件绑定,ajax

学习笔记:python3,代码片段(2017)

Javascript代码片段在drupal中不起作用

前端面试题之手写promise