Ajax从入门到精通

一只829

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

阅读量576

点赞数 1

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

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

版权

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元/天解锁文章

一只829

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax从入门到精通

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）可以无需率先你页面而与服务器端进
复制链接

扫一扫