前端学习笔记—Ajax

Ajax(Asynchronous JavaScript and XML):是指一种创建交互式的网页开发技术。
Ajax不是一种单一的技术，是多个技术的组合。它是把JavaScript、CSS、DOM和HTML结合起来的一种编程思路和方法的统称。Ajax技术颠覆了以往界面像服务端请求数据，需要重新刷新整个页面对这个数据做出展示的行为；只需要发出异步请求，等请求结果返回客户端后，在回调函数内对需要改变的部分界面进行数据绑定和显示，做到只需要刷新部分页面区域的功能而无需每次刷新整个页面，现在都是最常见的基本操作了。

Ajax的技术核心是XMLHttpRequest对象，而XMLHttpRequest说白了就是一个网络框架。Ajax的含义是使用JavaScript通过XMLHttpRequest对象进行与服务器的通信，返回xml,json,html或者其他任何一种文本格式的数据，然后对数据进行处理，异步显示界面等行为的一种编程操作。

1、网络请求

原生js处理ajax网络请求.png
jQuery处理ajax网络请求.png

//原生JavaScript  ajax网络请求
  var usernameStr = '超人来了';
        var xhrSend = new XMLHttpRequest();
        xhrSend.open('POST', 'http://localhost:8000/muxiInfo', true);
        xhrSend.setRequestHeader('Content-Type', 'application/json');
        xhrSend.send(JSON.stringify({ UserName: usernameStr }));
    //----------同步写法---onload
        xhrSend.onload = function () {
            if (xhrSend.status == 200) {
                console.log('--sendTest-接收：' + xhrSend.responseText);
                var data = JSON.parse(xhrSend.responseText);
                httpShow.innerHTML = data.message;
            } else {
                httpShow.innerHTML = '异常了呢';
            }
        };
   //-----------异步写法----onreadystatechange
  xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                isSending = false;
                if (xhr.status == 200) {
                   console.log('--sendTest-接收：' + xhrSend.responseText);
                    httpShow.innerHTML = xhr.response;
                } else {
                    httpShow.innerHTML = '请求成功，但是返回异常了呢';
                }
            } else {
                //其他状态，时刻监听
            }
        }

ajax1.png

//jQuery框架  ajax网络请求
 $.ajax({
            url: 'http://localhost:8000/muxiInfo',
            //请求参数
            data: { UserName: '李牛Ajax' },
            //请求类型POST/GET，不区分大小写
            type: 'POST',
            //发送server的参数类型
            contentType: 'application/json',
            //期望server响应返回的结果类型
            dataType: 'json',
            //是否异步请求，默认true
            async:true,
           //超时时间
            timeout: 2000,
            //成功回调
            success: function (data) {
                console.log(data);
                httpShow.innerHTML = data.message;
            },
            //失败回调
            error: function (e) {
                httpShow.innerHTML = e
            }
        })

2、跨域问题解决方案：

• 方案1：原生方法实现，利用<script>标签，使用程序员自己实现的巧妙方法“JSONP”跨域，只能处理GET请求

  
  

script script image.png

• 方案2：使用jQuery请求实现

jQuery跨域的原理也是通过外链 <script> 来实现的,然后在通过回调函数加上回调函数的参数来实现真正的跨域，默认callback函数名，可自定义。
jQuery 在每次跨域发送请求时都会有callback这个参数，其实这个参数的值就是回调函数名称，所以，服务器端在发送json数据时，应该把这个参数放到前面并加上括号，这个参数的值往往是随机生成的，如：jQuery1294734708682，同时也可以通过 $.ajax 方法设置 jsonpcallback 方法的名称。明白了原理后，服务器端应该这样发送数据：

1. jsonp、jsonpcallback，jsonp跨域时可以自定义的两个参数
2. jsonp: 回掉函数名的参数名，默认callback，服务端通过它来获取到回掉函数名
3. jsonpCallback: 回掉函数名，默认jquery自动生成

//前端发送格式
如：http://xxx.html?jsonp=jsonpCallback&xxxx&xxx，默认：http://xxx.html?callback=jQuery13213_564964&xxxx&xxx

//服务端发送格式
string message = "jQuery13213_564964({\"userid\":0,\"username\":\"null\"})";//服务端返回到前端js引擎解析，调用jQuery13213_564964()函数

jq jq

• 设置Cors请求头

  
  Cors

Cors

• 使用WebSocket通信

  
  image.png
• 设置代理服务器：通过同一域名端口下设置代理服务器去请求目标服务器返回数据