ajax

Ajax即 Asynchronous Javascript And XML (异步JavaScript 和 XML)

• 优点

  1. 无需刷新页面与服务器端进行通信
  2. 允许根据用户事件更新网页部分内容

• 缺点

  1. 没有浏览历史，不能回退
  2. 存在跨域问题(同源)
  3. SEO不友好 (SEO：搜索引擎优化) (爬虫爬不到，没有源码)

http

• 请求报文 (包含4部分)

  1. 请求行 (包含3部分)

     • 请求类型 (get,post等)
     • URL路径
     • HTTP协议版本(http/1.0 , http/2.0等)

  2. 请求头

     • Host: (值)
     • Cookie: (值)
     • Content-type: (值)
     • User-Agent: (值)

  3. 空 (固定格式，必须有)

  4. 请求体 (如果是get请求则为空，如果是post请求可以不为空)

• 响应报文

  1. 响应行 (包含3部分)
     • http协议版本
     • 响应状态码 (200)
     • 响应状态字符串
  2. 响应头
  3. 空
  4. 响应体 (响应的主要内容 内容)

const xhr = new XMLHttpRequest();
//创建Ajax对象
// xhr.responseType = 'json' //设置响应体数据的类型
xhr.open('GET', 'http://127.0.0.1:8000/server')
//请求类型和URL
//xhr.open('GET', 'http://127.0.0.1:8000/server?t='+Date.now()) 
//可以解决IE浏览器缓存(响应的是上次响应的缓存，并不再次请求服务器)的问题
// xhr.setRequestHeader  可以设置请求头
// xhr.timeout = 2000;  // 超时设置(自动取消)
// xhr.ontimeout = function(){ alert('网络超时')} //超时回调函数
// xhr.onerror = function(){ alert('网络异常')} //网络异常回调函数
// xhr.abort() //手动取消请求方法
xhr.send();
//发送请求 post方式可以设置参数
xhr.onreadystatechange = function () {
    //xhr.readystate的值 0,1,2,3,4
    // 0初始值
    // 1 open()执行完
    // 2 send()执行完
    // 3 部分响应
    // 4 全部响应
    if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr < 300) {
            //判断状态码
        }
    }
}

express框架 创建服务器端

const express = require('express');
const app = express();

app.get('/server', (req, res) => {
    //设置X响应头
    res.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    //const data = {
    //	name: any,
    //}
    //let str = JSON.stringify(data);// 将对象类型转换为字符串
    res.send('hello express');
});

app.listen(8000, () => {
    console.log('服务已经启动，8000端口监听中....')
})

解决跨域:

1. JSONP

   • 非官方跨域解决方案，只支持get请求
   • 网页一些标签天生具有跨域能力 如img,link,iframe,script
   • JSONP就是利用script标签的跨域能力来发送跨域请求

2. CORS

   • 跨域资源共享，官方跨域解决方案
   • 支持get,post
   • res.setHeader(‘Access-Control-Allow-Origin’, ‘*’) 服务器端设置响应头，允许跨域