AJAX基础

安和桥661
235 阅读4分钟

AJAX简介

AJAX全称为Asynchronous Javascript And XML,就是异步的js和XML。
优势：无刷新获取数据，可以根据用户事件来更新部分页面内容
缺点：1。没有浏览历史，不能回退 2.存在跨域问题 3.SEO不友好

主要分为四步：

    //1.创建对象
    const xhr = new XMLHttpRequest();
    //2.设置请求的方法和url
    xhr.open('GET','http://127.0.0.1:8000/server');//第二参数是url
    //将请求发送到服务器
    xhr.send();
    //4.事件绑定，处理服务端返回的结果
    xhr.onreadystatechange = function () {
      //判断（状态4：服务端返回了所有的结果）
      if (xhr.readyState == 4) {
        //判断响应状态码，200，404，403.401，500等
        //200到3百一般都为加载成功
        if (xhr.status == 200) {
        console.log('请求成功');
        }
        }
        }

XMLHttpRequest术语缩写为xhr，中文可以解释为可扩展超文本传输请求。

XMLHttpRequest对象的属性

image.png

XMLHttpRequest对象的方法

image.png

1.创建一个XMLHttpRequest对象
variable = new XMLHttpRequest();

2.xmlhttp.open（method，url，async）；
method:请求的类型；GET或POST
url：文件在服务器上的位置
async：true(异步)或false(同步)
GET和POST的区别： 与POST相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用POST请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST没有数据量限制）
  • 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。

GET请求有以下几个特点:

  • GET请求可被缓存
  • GET请求保留在浏览器历史记录中
  • GET请求可被收藏为书签
  • GET请求不应在处理敏感数据时使用
  • GET请求有长度限制
  • GET秦秋只有应当用于取回数据
    POST请求的特点：
  • POST请求不会被缓存
  • POST请求不会保留在浏览器历史记录中
  • POST请求不能被收藏为书签
  • POST请求对数据长度没有要求

3.xmlhttp.send(string);
将请求发送到服务器，string仅用于POST请求。

注意：onreadystatechange事件被触发 5 次（0 - 4），对应着readyState的每个变化。

　提示：XHR.readyState状态的变化如下：

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

跨域问题

同源策略

同源：协议、域名、端口号、必须完全相同。
违背同源策略就是跨域，AJAX默认遵循同源策略。

跨域的解决方案
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin'."*")

创建一个接口

第一、安装node.js

安装node.js才能引入express框架

第二、创建接口环境
  1. 创建一个js文件然后写下面代码
  2. 然后在node终端里面输入:node 创建文件.js
  3. 启动完后就在想要调用这个端口的HTML中执行xhr四步
    端口默认地址为：http://127.0.0.1:8000
    8000是自己设置的，在下面可以看到listen
    //1.引入express
const express = require('express');

//2.创建应用对象
const app = express();

//3. 创建路由规则
//request是对请求报文的封装
//Response对响应报文的封装
app.get('/server', (request, response) => {
  //设置响应头,这里在设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //设置函数体
  response.send('hello ajax');
});


//all可以接收任意类型的请求
app.all('/json-server', (request, response) => {
  //设置响应头,这里在设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  //响应头
  response.setHeader('Access-Control-Allow-Headers', '*');
  //设置函数体
  // response.send('hello ajax JSON');//send就是返回回去的结果


  //响应一个数据
  const data = {
    name: '枫原万叶',
    age: 20
  };
  //对对象进行字符串转换
  let str = JSON.stringify(data);
  //设置响应体
  response.send(str);
});


//延时响应
app.get('/delay', (request, response) => {
  //设置响应头,这里在设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  setTimeout(() => {
    ;
    //设置函数体
    response.send('延时响应');
  }, 3000);
});

//4.监听端口启动服务
app.listen(8000, () => {
  console.log('服务已经启动，8000端口监听中...');
})
avatar
文章
阅读
粉丝