ajax

一、 http 状态码

• 0： 请求未初始化（还没有调用 open()）。
• 1： 请求已经建立，但是还没有发送（还没有调用 send()）。
• 2： 请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
• 3： 请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
• 4： 响应已完成；您可以获取并使用服务器的响应了。

二、 ajax 请求实例

//请求地址
var url_banner = "http://netease2.bluej.cn/banner";
//ajax
// 1. 创建对象
var xhr = new XMLHttpRequest();
// 2. 设置打开方式
// open(请求方式,请求地址)
xhr.open("get", url_banner);
// 3. 监听状态改变
xhr.addEventListener("readystatechange", function(e) {
  //状态值 readyState
  //状态码 status
  //		成功解析 200
  //		未找到资源 404
  if (e.target.readyState == 4 && e.target.status == 200) {
    var res = e.target.response;
    //json格式
    //还原成对应的数据格式
    var res = JSON.parse(res);
    var banners = res.banners;
    for (var i = 0; i < banners.length; i++) {
      // console.log(banners[i].picUrl);
      document.body.innerHTML += `
					<img src='${banners[i].picUrl}' />`;
    }
  }
});
// 4. 发起请求
xhr.send();

封装 ajax

// 封装ajax请求
function ajax(option) {
  var xhr = new XMLHttpRequest();
  xhr.open(option.type, option.url);
  //url 编码格式
  if (option.type == "post") {
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  }
  xhr.addEventListener("readystatechange", function(e) {
    if (e.target.readyState == 4 && e.target.status == 200) {
      //成功的回调
      var res = JSON.parse(e.target.response);
      // 如果有该方法则执行
      option.success && option.success(res);
    } else {
      option.fail && option.fail(e);
    }
  });

  //post传参{name:haha ,age:18}
  xhr.send();
}

// 调用
ajax({
  type: "get",
  // type: 'post',
  url: "http://netease2.bluej.cn/search?keywords= 海阔天空",
  success: function(res) {
    console.log("封装方法", res);
  }
});

三、 跨域问题

同域 : 协议:// 二级域名.一级域名
协议,域名,端口号都要相同

跨域的产生

域：协议://二级域名.一级域名:端口号

跨域：域名，协议或者端口有任意一个不同的都算跨域

根本原因:浏览器的同源策略，为了确保网络安全，拦截了网络请求

解决办法

1. jsonp

前端代码

// 后台返回数据时将callback作为函数名,将数据放在函数的小括号中
//cbbb(data)
//  缺点 :
// 1. 只能get请求
// 2. 没有准确的回调,没法知道成功以外的回调
function jsonp() {
  //jsonp 接口
  var url = "http://suggest.taobao.com/sug?code=utf-8&q=鼠标&callback=cbbb";

  // 1. 创建script 标签
  var script = document.createElement("script");
  // 2. 引入jsonp 接口
  script.src = url;

  // 4. script
  document.body.appendChild(script);
}
jsonp();
// 3. 回调函数
function cbbb(res) {
  console.log("jsonp", res);
}

后台代码

// http 模块
const http = require("http");
//url 模块
const URL = require("url");
// 创建服务器
const server = http.createServer();
server.on("request", (request, response) => {
  let url = URL.parse(res.url, true);
  console.log(url);
  let callback = url.query.callback;
  let data = JSON.stringify({ test: 123 });
  response.write(`${callback}(${data})`);
  response.end();
});
server.listen(3000);

2. 后端打开跨域允许

响应头的Access-Control-Allow-Origin: 设置了请求端的域名,就可以访问了

需要后台设置

3. 反向代理

让自己的后端服务器请求别人的服务器，自己服务器拿到数据后再返回给前端

前端 --x--> 网易后端

自已服务器后端 < --没有同源策略--> 网易后端

// http 模块
const http = require("http");

//发起请求的设置  例如 地址,方式
const options = {
  host: "m.maoyan.com",
  path: "/ajax/movieOnInfoList",
  method: "get"
};
// const options = {
// 	host: 'nideshop.bluej.cn',
// 	path: '/index/index',
// 	method: 'get',
// }
let request = http.request(options, response => {
  //状态码
  console.log(response.statusCode);
  var data = "";
  //
  response.on("data", chunk => {
    data += chunk;
  });
  response.on("end", () => {
    console.log(data);
  });
});

//请求结束
request.end();