Ajax从入门到精通

一只829

已于 2022-05-12 18:13:36 修改

阅读量951

点赞数 1

于 2022-05-12 18:13:20 首次发布

本文链接：https://blog.csdn.net/qq_63533863/article/details/124696397

版权

本文全面介绍Ajax技术，包括Ajax简介、XML基础知识、HTTP协议详解、NodeJS和Express快速上手，以及Ajax的使用、设置请求参数、处理网络异常等问题。同时探讨了Ajax的优缺点、同源策略及其解决方案，如JSONP和CORS。

摘要由CSDN通过智能技术生成

1.13 自动重启工具安装 nodemon

1.1、Ajax简介

Ajax（Asynchronous JavaScript and XML），异步的JavaScript与XML

通过AJAX可以在浏览器中向服务器发送异步请求，最大优势：无刷新获取数据

1.2、XML简介

XML（Extensible Markup Language），可扩展标记语言

XML 用来传输和存储数据

XML与HTML类似，不同的是HTML中有预定义标签，而XML中码云预定义的标签

1.3、AJAX的特点

1.3.1优点

1）可以无需率先你页面而与服务器端进行通信

2）允许你根据用户时间来更新部分页面内容

1.3.2缺点

1）没有浏览历史，不能回退

2）存在跨域问题（同源）

3）SEO不友好

1.4HTTP协议简介

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网服务器传输超文本到本地浏览器的传送协议。

1.4.1 请求报文：

请求行：POST/GET URL 协议/版本号
请求头：

空行

请求体

1.4.2 响应报文

请求行：版本号状态码原因
请求头：

空行

请求体：html内容

1.5 NodeJS安装

node.js 安装详细步骤教程_程序员老油条的博客-CSDN博客_node.js

1.6 express基本使用

1.6.1 安装

npm i express

//引入
const express = require('express');
//创建应用对象
const app = express();

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装

app.get('/',(request,response)=>{

   //设置响应体
    response.send('HELLO AJAX');
});

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

启动

1.7AJAX基本使用

点击按钮拿到响应体内容在方框中做出呈现

响应体内容为：

express.js


//引入
const express = require('express');
//创建应用对象
const app = express();

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装

app.get('/server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
   //设置响应体
    response.send('HELLO AJAX');
});

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

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn=document.getElementsByTagName('button')[0];
        const result=document.getElementById("result");
        btn.onclick=function(){
            //创建对象
            const xhr=new XMLHttpRequest();
            //初始化
            xhr.open('GET','http://127.0.0.1:8000/server')
            //发送
            xhr.send();
            //事件绑定 处理服务端返回结果
            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文本
                    result.innerHTML=xhr.response;
                 }else{
                     
                 }
            }
        }
    </script>
</body>
</html>

最低0.47元/天解锁文章