AJAX基础

iceylia

已于 2022-07-05 08:45:58 修改

阅读量255

点赞数

分类专栏： # AJAX 文章标签： ajax 前端 javascript

于 2022-06-21 10:16:43 首次发布

本文链接：https://blog.csdn.net/m0_46228204/article/details/124974455

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 ajax介绍

我理解的ajax全名就是异步的js和xml，一种前端和后端的交互，最大的特点就是能够无刷新地获取数据。不过现在xml已经成为历史了，现在是json存储数据。
发送方式：有四种方式能够发送ajax请求，原生，jq，fetch，axios。
缺点：存在跨域问题，不能访问其它浏览器上的内容，没有浏览历史，不能回退，对seo(搜索引擎优化)不友好，

2 HTTP

全称为hypertext transport protocol 超文本传输协议，是浏览器和万维网服务器之间传输的一种规定

2.1 请求报文

2.1.1 行

分为三部分

请求类型 GET/POST…
路径及一些参数，通过url传递。如/s?articled=454&ie=5 其中s是路劲，?之后是参数，&用以分割不同参数
HTTP协议版本如HTTP/1.1

2.1.2 头

Host:atguigu.com
Cookie:name=guigu
Content-type:application/x-www-form-urlencoded
…

2.1.3 空行

就是一个必须有的空着的一行

2.1.4 体

如果是get类型就没有，如果是post请求就可以有内容如username=iceylia

2.2 响应报文

2.2.1 行

HTTP版本
响应状态码 200 到300 都是成功，较为常见的404是找不到
响应字符串，与响应状态码对应，不需要单独设置如200对应OK
头和空行的格式和请求报文一致，就不再说了

2.2.2 体

返回的内容，可以是一个html文件，比如

<html>
	<head>
	</head>
</html>

3 安装nodejs和express框架

这两个可以简化过程
nodejs直接上官网下载，下载后用cmd查看版本号node -v,有就是成功了
npm的介绍，在官网上下载框架无疑是一个不是很方便的事情，于是npm(node package manage)就出现了，可以直接在ide里面下载，只要你安装了nodejs，npm也是nodejs里面自带的。
npm的常用操作,用express举例
npm init 在当前的项目中初始化npm环境, 生成一个package.json的文件，用以存放包的信息
npm i express 安装express
npm i express@1.0.1 安装1.0.1版本的express
npm search express 搜索express
npm remove express 移除express
所以安装express的流程就是npm init 然后 npm i express
更多详情可以看这里
nodejs

4 XMLHttpRequest 对象

4.1 介绍

这是ajax最核心的一个东西，就是靠着这个浏览器内置的对象实现xml的操作

4.2 属性和方法

4.2.1 方法

new XMLHttpRequest() 创建新的 XMLHttpRequest 对象
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(method, url, async, user, psw) 规定请求
method：请求类型 GET 或 POST
url：文件位置
async：true（异步）或 false（同步）
user：可选的用户名称
psw：可选的密码
send() 将请求发送到服务器，用于 GET 请求
send(string) 将请求发送到服务器，用于 POST 请求
setRequestHeader() 向要发送的报头添加标签/值对

4.2.2 属性

onreadystatechange 定义当 readyState 属性发生变化时被调用的函数
readyState 保存 XMLHttpRequest 的状态。
0：请求未初始化
1：服务器连接已建立
2：请求已收到
3：正在处理请求
4：请求已完成且响应已就绪
responseText 以字符串返回响应数据
responseXML 以 XML 数据返回响应数据
status 返回请求的状态号
200: “OK”
403: “Forbidden”
404: “Not Found”
statusText 返回状态文本（比如 “OK” 或 “Not Found”）

5 简单的使用

点击按钮，获取服务端的文字，出现在框里面

<button id="button_test">发送请求</button>
<div id="result"></div>

#button_test{
	width: 100px;
}
#result{
   width: 200px;
   height: 200px;
   border: solid 1px;
   border-color: rgb(175, 175, 175);
}

先写一个express.js的文件，作为服务端

// 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 Express");//设置响应体
});
// 4. 监听端口，启动服务
app.listen(8000, () => {
  console.log("服务已经启动, 8000 端口监听中...");
})

const btn = document.querySelector("#button_test");
const result = document.querySelector("#result");
btn.addEventListener("click", ()=>{
   const xhr = new XMLHttpRequest();//现在还是xml的http请求实例化，实际上应该是json
   xhr.open("GET", "http://127.0.0.1:8000/server?a=100&b=200");//请求类型和url
   xhr.send();
	   //readystate 时xhr对象中的属性，表示状态，共有01234五种  0未初始化，1open调用完毕，2send完毕，			3返回部分结果，4返回完成
	//当准备状态码改变的时候，就调用函数，总共会触发四次，知道readystate变成4
	xhr.onreadystatechange = function(){
	    if(xhr.readyState === 4){//当返回成功的时候
	        if(xhr.status >= 200 && xhr.status < 300){//返回状态码是成功
	            console.log(xhr.status);//状态码
	            console.log(xhr.statusText);//状态字符串
	            console.log(xhr.getAllResponseHeaders());//所有的响应头
	            console.log(xhr.response);//响应体
	            result.innerHTML = xhr.response;//可以在这个框里面输出响应体
	        }
	    }
	}
});

6 GET与POST

一般情况下使用GET，因为速度快，下面三种情况使用POST

缓存文件不是选项（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 无大小限制）
发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

7 json

7.1 简单使用

按下任意按键出现输入框出现iceylia的字样

html

<div id="result"></div>

#result{
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

express

const express = require('express');
const app = express();
app.all("/json-server", (request, response) => {
  response.setHeader("Access-Control-Allow-Origin", "*");
  const data = {
    name: "iceylia"
  };
  let str = JSON.stringify(data);//这个函数的作用就是将js里的变量（一般为数组和对象）转化成json型的字符串
  response.send(str);//send只能传输字符串
});

const result = document.querySelector("#result");
window.onkeydown = function(){
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "http://127.0.0.1:8000/json-server");
    xhr.send();
    xhr.responseType = "json";
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status < 300){
                result.innerHTML = xhr.response.name;//当我们改变服务端的内容的时候，即使客户端没刷新也能得到新的内容
                //这个时候有两种方式把传过来的json转为对象
                //手动转化
                // let data = JSON.parse(xhr.response);
                // console.log(data);//对象
                // console.log(data.name);//iceylia
                //自动转换在前面加上xhr.responseType = "json"
                
                console.log(xhr.response.name);
            }
        }
    }
}

7.2 介绍

格式与js的对象基本一样
JavaScript Object Notation(JavaScript 对象标记法)
相当于文本
淘汰了xml
形式
{name:215,
age: 18,
money: 0}

7.3 重要函数

JSON,stringify()将js的数组和对象，转为json格式的字符串
parse let data = JSON.parse(xhr.response)将json转为js对象

7.4 json在js中的定义和使用

json的本质还是文本

let text = '{"employees":[{"firstName":"Bill","lastName":"Gates" },{"firstName":"Steve","lastName":"Jobs" },{"firstName":"Elon","lastName":"Musk" }]}';

这就是只有一个employees键名的json
很长

let text = '{"employees":['+'{"firstName":"Bill","lastName":"Gates" },'+
'{"firstName":"Steve","lastName":"Jobs" },'+
'{"firstName":"Elon","lastName":"Musk" }]}';

大多时候很长，可读性
下面是使用

var jsonobj = JSON.parse(text);
console.log(jsonobj);

iceylia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录