AJAX 请求解决跨域问题 与 函数封装

AJAX

• 简介：Ajax 是一种无需重新加载整个网页的情况下，能够更新部分网页的技术
• 什么是Ajax

  1. Ajax 即Asynchronous JavaScript and XML (异步的Javascript 和 XML)

  2. Ajax 不是新的编程语言，而是一种使用现有标准的新方法

  3. Ajax 不需要任何浏览器插件，但是需要用户允许Javascript 在浏览器上运行

  4. Ajax 是一种用于创建快速动态网页的技术

  5. 传统网页(不使用 Ajax)，如需更新内容，必须重载整个页面

一个简单的Ajax请求

// 创建一个 XHR 实例
var $http = new XMLHttpRequest();

// 开启请求,第一个参数是请求的方式，第二个参数是请求的地址
$http.open('get', 'http://localhost:3000');

// 将开启的请求发出去
$http.send();

Ajax 的请求状态 readyState

• 值为 ‘0’ 时，代表请求未初始化
• 值为 ‘1’ 时，代表服务器连接已建立
• 值为 ‘2’ 时，代表服务器已接收请求
• 值为 ‘3’ 时，代表服务器正在处理请求
• 值为 ‘4’ 时，代表请求已完成，且响应已就绪

// onreadystatechange 是一个监听函数，监听请求状态(readyState)的变化
$http.onreadystatechange = function () {
    
    
    if($http.readyState === 1) {
    
    
        console.log('服务器连接已建立');
    } else if($http.readyState === 2) {
    
    
        console.log('服务器接收到了请求');
    } else if($http.readyState === 3) {
    
    
        console.log("服务器正在处理请求");
    } else if($http.readyState == 4 && $http.status == 200) {
    
    
        console.log("请求已完成，且响应已就绪");
        // stastus 值为200 时表示响应成功
        // 此时，可以通过 responseText 属性来获取服务端响应的数据
        // 这个数据是JSON字符串，所以需要转换为JSON对象才能使用
        var data = JSON.parse($http.responseText);
    }
};

解决跨域问题

• 直接发送Ajax 请求会产生跨域问题，解决方法是在路由模块里配置

// 这里使用 express 框架进行演示
var express = require('express');
var router = express.Router();

// 设置跨域访问
router.all('*', function (req, res, next) {
    
    
    // 设置允许跨域请求的域名，* 表示允许域名
    res.header('Access-Control-Allow-Origin', '*');
    // 设置允许跨域请求的方式(GET,POST,PUT,OPTIONS)，* 表示所有方式
    res.header('Access-Control-Allow-Methods', '*');
    next();
});

封装函数，用于适用所有的AJAX 请求

// 定义一个函数
function ajax(options) {
    
        //传入一个对象作为参数
    var $http = new XMLHttpRequest();
    $http.open(options.method, options.url);
    $http.onreadystatechange = function () {
    
    
        if($http.readystate == 4 && $http.status == 200) {
    
    
            var data = JSON.parse($http.responseText);
            options.success(data);
        }
    }
    $http.send();
};

// 调用
ajax({
    
    
    method: 'get',
    url: 'http://localhost:3000',
    success: function (result) {
    
        // 这里接收函数的形参 data
        // 要执行的代码
    }
});



// 也可以进一步封装函数
ajax.get = function (options) {
    
    
     var $http = new XMLHttpRequest();
    $http.open('get', options.url);
    $http.onreadystatechange = function () {
    
    
        if($http.readystate == 4 && $http.status == 200) {
    
    
            var data = JSON.parse($http.responseText);
            options.success(data);
        }
    }
    $http.send();
}
// 调用
ajax.get({
    
    
    url: 'http://localhost:3000',
    success: function (result) {
    
        // 这里接收函数的形参 data
        // 要执行的代码
    }
});