Ajax学习笔记

已于 2022-03-13 16:43:31 修改
阅读量500 收藏 2
点赞数 1
分类专栏： 零基础学前端学习笔记 文章标签： ajax 前端 javascript
于 2022-01-23 19:32:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li520_fei/article/details/122655833
版权

【前端总路线学习笔记】

文章目录

Ajax

1. Ajax概述

1.1 AJAX 简介

AJAX 全称为Asynchronous JavaScript And XML，就是异步的JS 和XML
通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

1.2 XML 简介

XML 可扩展标记语言。
XML 被设计用来传输和存储数据。
XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。

//比如说我有一个学生数据：
//name = “孙悟空” ; age = 18 ; gender = “男” ;
//用XML 表示：

<student>
	<name>孙悟空</name>
	<age>18</age>
	<gender>男</gender>
</student>

现在已经被JSON 取代了。

{"name":"孙悟空","age":18,"gender":"男"}

1.3 AJAX 的特点

1.3.1 AJAX 的优点
  • 可以无需刷新页面而与服务器端进行通信
  • 允许你根据用户事件来更新部分页面内容
1.3.2 AJAX 的缺点
  • 没有浏览历史，不能回退
  • 存在跨域问题(同源)
  • SEO 不友好

2. HTTP相关问题

2.1 MDN 的HTTP文档

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview

HTTP(hypertext transport protocol)协议 【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

2.2 HTTP 请求交互的基本过程

  1. 前后应用从浏览器端向服务器发送HTTP 请求(请求报文)
  2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
  3. 浏览器端接收到响应, 解析显示响应体/调用监视回调

2.3 HTTP 请求报文

重点是格式与参数

请求行		POST /s?ie=utf-8 HTTP/1.1
请求头		Host: atguigu.com
		  cookie: name=guigu
		  content-type: application/x-www-form-urlencoded
		  ....
空行
请求体		username=admin&password=admin

2.4 HTTP 响应报文

响应行		HTTP/1.1 200 OK
响应头		Content-Type:text/html;charset=utf-8
		  Content-length:2048
		  Content-encoding:gzip
空行
响应体		<html>
			  <head>
			  </head>
			  <body>
			  </body>
		  </html>

2.5 谷歌浏览器调试

  1. F12 打开控制台
  2. 网络栏：network /网络：这里有网页加载所有发送的请求

1642902096(1)
4. 点击查看源码，可以看到完整的请求报文 和响应报文

image-20220123095915274

载荷：一些参数，老师的在Headers里面，现在分离出来了，如果响应有参数，就在“标头”和“预览”之间出现
6. '响应’栏会返回页面的HTML文件

3. 原生AJAX 的基本使用

3.1 安装node.js

http://nodejs.cn/

3.2 安装express（服务端框架）

https://www.expressjs.com.cn/

在编辑器中打开终端，输入下面的代码

  1. 初始化环境
npm init --yes
  1. 下载express包
npm install express --save
  1. 编写js代码(自己创建的js文件 ，这里我的是 express_use.js)
// 1. 引入express
const express = require('express');

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

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {
  //  设置响应
  response.send("Hello Express");
});

// 4. 监听端口，启动服务
app.listen(8000, () => {
  console.log("服务已经启动, 8000 端口监听中...");
 })
  1. 在终端运行js程序
node express_use.js
  1. 网页打开 http://127.0.0.1:8000/
  2. 打开控制台的网络，刷新页面，

image-20220123102538892

3.3 AJAX get案例

  1. 创建好文件夹和文件 开始编写代码

image-20220123103554668

  1. 前端页面的准备
<!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>Ajax GET 请求</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #90b;
    }
  </style>
</head>
<body>
  <button>点击发送请求</button>
  <div id="result"></div>
  <script>
    //获取button元素
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result');
    //绑定事件
    btn.onclick = function(){
      // 1. 创建对象 
      const xhr = new XMLHttpRequest();
      // 2. 初始化 设置请求方法和url
      xhr.open('GET', 'http://127.0.0.1:8000/server')
      // 3. 发送
      xhr.send();
      // 4. 事件绑定 处理服务端返回的结果
      xhr.onreadystatechange = function(){
        // on when 当..时候
        // readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
        // 0：未初始化 1： open方法调用完毕 2：send方法调用完毕 
        //3：服务端返回部分结果 4：服务端返回全部结果
        // change 改变的时候触发
        //判断 (服务端返回了所有的结果)
        if(xhr.readyState === 4){
          //判断响应状态码 200  404  403 401 500
          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>
  1. 服务端准备
// 1. 引入express
const express = require('express');

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

// 3. 创建路由规则
app.get('/server', (request, response) => {
  // 设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 设置响应体
  response.send("Hello Ajax");
});

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

3.4 AJAX GET 请求设置请求参数

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

image-20220123112715583

3.5 AJAX post案例

  1. 前端页面
<!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>Ajax POST 请求</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #903;
    }
  </style>
</head>
<body>
  <div id="result"></div>
  <script>
    // 获取元素对象
    const result = document.getElementById('result');
    // 绑定事件
    result.addEventListener("mouseover", function(){
      // 1. 创建对象
      const xhr = new XMLHttpRequest();
      // 2. 初始化 设置类型（请求方式）与url
      xhr.open('POST', 'http://127.0.0.1:8000/server');
      // 3. 发送   设置请求参数（请求体）
      xhr.send('a=100&b=200&c=300');
        //这个请求体可以是任何格式、任意类型，只要服务器可以处理，
        //若是服务器不能处理也可以发送，只是没有意义
        
      // 4. 事件绑定
      xhr.onreadystatechange = function(){
        // 判断
        if(xhr.readyState === 4){
          if(xhr.status >=200 && xhr.status < 300){
            // 处理服务端返回的结果
            result.innerHTML = xhr.response;
          }
        }
      }
    });
  </script>
</body>
</html>
  1. 服务器代码(修改为需要重启服务器)
// 1. 引入express
const express = require('express');

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

// 3. 创建路由规则
app.get('/server', (request, response) => {
  // 设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 设置响应体
  response.send("Hello Ajax");
});
app.post('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send("Hello Ajax");
  });
// 4. 监听服务
app.listen(8000, () => {
  console.log("服务已经启动, 8000 端口监听中...");
 })
请求体

xhr.send('a=100&b=200&c=300');post设置请求体 request payload

3.6 AJAX设置请求头信息


// 设置请求体内容的类型
xhr.setRequestHeader('Content-Type','application/x-www-from-urlencoded');
// 自定义头信息
xhr.setRequestHeader('name', 'lightofD');

server.js中设置响应头允许自定义请求头 post改成all

服务器代码：

// 1. 引入express
const express = require('express');

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

// 3. 创建路由规则
app.get('/server', (request, response) => {
  // 设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 设置响应体
  response.send("Hello Ajax");
});
app.all('/server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
     // 设置响应头, 设置允许自定义头信息
    response.setHeader('Access-Control-Allow-Headers','*');
    // 设置响应体
    response.send("Hello Ajax");
  });
// 4. 监听服务
app.listen(8000, () => {
  console.log("服务已经启动, 8000 端口监听中...");
 })

3.7 服务端响应JSON数据

  1. 服务器代码
// 1. 引入express
const express = require('express');

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

// 3. 创建路由规则
app.all('/server', (request, response) => {
    // 设置响应头, 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应头, 设置允许自定义头信息
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 响应一个数据
    const data = {
      name: 'atguigu'
    };
    // 对 对象 进行 字符串 转换 ；转换为JSON格式
    let str = JSON.stringify(data)
    // 设置响应体 
    response.send(str);
  });

// 4. 监听服务
app.listen(8000, () => {
  console.log("服务已经启动, 8000 端口监听中...");
 })
  1. 我们的页面会接受到一个字符串
//设置响应体数据的类型(自动转换) 
xhr.responseType = 'json';
//设置之前 我们xhr.response接收到的是服务器的json格式字符串
//设置只后 xhr.response自动根据这个字符串转换为对象

//当然我们也可以手动转换
// 1. 手动对数据转化 (字符串再转换成json)
let data = JSON.parse(xhr.response); //转换成json
//这个data 就是字符串对应的对象了
//调用其中数据格式 data.name
  1. html示例（键盘随意输入发送post请求）
<!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>JSON</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #89b;
    }
  </style>
</head>
<body>
  <div id="result"></div>
  <script>
    const result = document.getElementById('result');
    // 绑定键盘按下事件
    window.onkeydown = function(){
      // 发送请求
      const xhr = new XMLHttpRequest();
      // *2*.(自动转换) 设置响应体数据的类型(自动转换)
      xhr.responseType = 'json';
      // 初始化
      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.response);
            // 1. 手动对数据转化 (字符串再转换成json)
            // let data = JSON.parse(xhr.response); //转换成json
            // result.innerHTML = data.name;
            // *2*. (自动转换)自动转换(自动转换)
            result.innerHTML = xhr.response.name; //已经自动变成json
          }
        }
      }
    }
  </script>
</body>
</html>

3.8 nodemon自动重启工具

之前我们每次更改服务器端的代码都需要重启服务器，非常麻烦

有了这个工具，只要启动一次，我们修改服务端代码，保存后自动重启服务器。

但是启动代码的方式从 node 文件名 改为nodemon 文件名

  1. 安装
npm install -g nodemon
  1. 启动
nodemon .\server.js
  1. 启动失败怎么办，运行下条命令，一定要注意运行所在路径！！！一定注意路径！！！cd命令修改到server.js所在目录
npx nodemon .\server.js

3.9 解决 IE 缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据url 地址来记录的，所以我们只需要修改url 地址即可避免缓存问题

xhr.open('GET', 'http://127.0.0.1:8000/server?t='+Date.now());

3.10 请求网络超时与网络异常

// 超时设置 （2秒）
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function(){
	alert('网络超时，请稍后重试')
}
// 网络异常回调
xhr.onerror = function(){
	alert('网络异常，请稍后重试')
}

服务器模拟延迟效果

// 1. 引入express
const express = require('express');

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

// 3. 创建路由规则
app.all('/server', (request, response) => {
    // 设置响应头, 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应头, 设置允许自定义头信息
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 响应一个数据
    setTimeout(()=>{
        // 设置响应体 
        response.send('str');
    },3000)


  });

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

浏览器模拟断网

image-20220123180425444

3.11 取消请求

// 手动取消
xhr.abort()

3.12 重复请求问题

相当于一个小的算法

<!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>JSON</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #89b;
    }
  </style>
</head>
<body>
    <button>发送</button>
  <div id="result"></div>
  <script>
    const btns = document.querySelectorAll('button')
    const result = document.getElementById('result');
    let xhr =null;
    
    //标识变量
    let isSending = false;//这个变量代表是否正在发送AJAX请求

    btns[0].onclick = function(){
        
        if(isSending) xhr.abort(); //如果正在发送，则取消该请求，创造一个新的请求
        xhr = new XMLHttpRequest();
        
        //修改标识变量的值
        isSending = true;
        xhr.open('GET', 'http://127.0.0.1:8000/server');
        xhr.send();

        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                //修改标识变量的值
                isSending = false;//只要状态为4，表示发送完了，修改正在发送为false
                if(xhr.status >= 200 && xhr.status < 300){
                result.innerHTML = xhr.response; //已经自动变成json
                }
            }
        }
    }

  </script>
</body>
</html>

3.13 总结

  • XMLHttpRequest()：创建 XHR 对象的构造函数
  • status：响应状态码值，如 200、404
  • statusText：响应状态文本，如 ’ok‘、‘not found’
  • readyState：标识请求状态的只读属性 0-1-2-3-4
  • onreadystatechange：绑定 readyState 改变的监听
  • responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应
  • response：响应体数据，类型取决于 responseType 的指定
  • timeout：指定请求超时时间，默认为 0 代表没有限制
  • ontimeout：绑定超时的监听
  • onerror：绑定请求网络错误的监听
  • open()：初始化一个请求，参数为：(method, url[, async])
  • send(data)：发送请求
  • abort()：中断请求 （发出到返回之间）
  • getResponseHeader(name)：获取指定名称的响应头值
  • getAllResponseHeaders()：获取所有响应头组成的字符串
  • setRequestHeader(name, value)：设置请求头

4. jQuery 中的AJAX

4.1 get 请求

$.get(url, [data], [callback], [type])
  • url:请求的URL 地址
  • data:请求携带的参数
  • callback:载入成功时回调函数
  • type:设置返回内容格式，xml, html, script, json, text, _default

4.2 post请求

$.post(url, [data], [callback], [type])
  • url:请求的URL 地址
  • data:请求携带的参数
  • callback:载入成功时回调函数
  • type:设置返回内容格式，xml, html, script, json, text, _default

4.3通用方法

$.ajax({
	// url
	url: 'http://127.0.0.1:8000/jquery-server',
	// 参数
	data: {a:100, b:200},
	// 请求类型
	type: 'GET',
	// 响应体结果
	dataType: 'json',
	// 成功的回调
	success: function(data){console.log(data);},
	// 超时时间
	timeout: 2000,
	// 失败的回调
	error: function(){console.log('出错拉~');},
	// 头信息
	headers: {
		c: 300,
		d: 400
	}	
})

5.Axios 发送 Ajax 请求

5.1 get 请求

            axios.get('http://localhost:8000/axios-server', {
                //url参数
                params:{
                    id:1000,
                    vip:12
                },
                //请求头信息
                headers:{
                    name:'hanser',
                    age:'2'
                }
            }).then(value=>{
                console.log(value)
            })

5.2 post请求

            axios.post('http://localhost:8000/axios-server', {
                    username:'admin',
                    password:'123'
                },{
                //url参数
                params:{
                    id:1,
                    vip:123
                },
                //请求头参数
                headers:{
                    name:'yousa',
                    age:'23'
                },
                //请求体
               
            })

5.3通用方法

            axios({
                method:'POST',
                url:'http://localhost:8000/axios-server',
                //url参数
                params:{
                    vip:10,
                    id:123
                },
                //头信息
                headers:{
                    a:100,
                    b:200
                },
                //请求体参数
                data:{
                    name:'hanser',
                    age:'7'
                }
            }).then(response=>{
                console.log(response)
            })

6.fetch

            fetch('http://localhost:8000/fetch-server',{
                //请求方法
                method:'POST',
                //请求头
                headers:{
                    name:'hanser'
                },
                //请求体
                body: 'name=admin&pd=admin'
            }).then(Response=>{
                console.log(Response)
                return Response.text()
            }).then(Response=>{
                console.log(Response)
            })

7.跨域

7.1 同源策略

  • 同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略
  • 同源： 协议、域名、端口号必须完全相同
  • 跨域： 违背同源策略就是跨域

7.2 如何解决跨域

7.2.1 JSONP
1)JSONP 是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get 请求。

2)JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用script 标签的跨域能力来发送请求的。

如果请求的服务器资源，返回的字符串必须是js代码，一般返回函数调用，把数据当作参数，这个函数需要在页面里面提前声明

<script>
        function handle(data){
            const res = document.getElementById('res')
            res.innerHTML = data.name
        }
    </script>
    <!-- <script src="http://127.0.0.1:5500/express%E6%A1%86%E6%9E%B6/%E8%B7%A8%E5%9F%9F/2-jsonp/app.js"></script> -->
<script src="http://localhost:8000/jsonp-server"></script>

服务器路由：

//jsonp 服务
app.all('/jsonp-server', (requesr, response)=>{

    const data = {name:'hanser'}
    //设置响应
    let str = JSON.stringify(data)
    // response.send('console.log("hello jsonp")')
    response.send(`handle(${str})`)

})
3)JSONP 的使用
  1. 动态的创建一个script 标签
var script = document.createElement("script");
  1. 设置script 的src，设置回调函数
script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
	alert(data.name);
};
  1. 将script 添加到body 中
document.body.appendChild(script);
  1. 服务器中路由的处理
router.get("/testAJAX" , function (req , res) {
	console.log("收到请求");
	var callback = req.query.callback;
	var obj = {
		name:"孙悟空",
		age:18
	}
	res.send(callback+"("+JSON.stringify(obj)+")");
});

4)jQuery 中的JSONP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 150px;
            border: 1px solid #bfa;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <button>点击发送jsonp请求</button>
    <div id="res"></div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://localhost:8000/jquery-jsonp-server?callback=?', function(data){
                $('#res').html(`
                姓名：${data.name},
                年龄：${data.age}`)
            })

        })
    </script>
</body>
</html>

服务器中路由的处理

//用户名检测是否存在
app.all('/jquery-jsonp-server', (request, response)=>{

    const data = {
        name:'hanser',
        age:2}
    //设置响应
    let str = JSON.stringify(data)
    //接受callback参数
    let cb = request.query.callback
    // response.send('console.log("hello jsonp")')
    response.send(`${cb}(${str})`)

})
7.2.2 CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

1)CORS 是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get 和post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

2)CORS 怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

3)CORS 的使用

主要是服务器端的设置：

router.get("/testAJAX" , function (req , res) {
	//通过res 来设置响应头，来允许跨域请求
	//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
	res.set("Access-Control-Allow-Origin","*");
	res.send("testAJAX 返回的响应");
});
D之光
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ajax学习笔记
11-30
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 7757
史上最强Ajax学习笔记
AJAX学习笔记
weixin_44497507的博客
11-10 454
【代码】AJAX学习笔记。
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
jQuery+AJAX学习笔记
10-10
jQuery+AJAX学习笔记
jquery中ajax学习笔记3
10-28
由于很多知识都已经做了详细介绍，本节只介绍需要修改的代码，使用jqery封装的ajax使用XML格式接收服务器端的数据，web.xml、后台的servet都不用改
jquery中ajax学习笔记4
10-28
本节主要介绍两点：1.缓存问题 2.中文问题
AJAX学习笔记.docx
08-01
AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它允许网页与服务器进行异步通信，实现页面内容的动态更新，而无需刷新整个页面。
AJax 学习笔记一(XMLHTTPRequest对象)
10-29
今天学习了点关于XMLHttpRequest对象的一些方法和属性，有点体会，在这里也想记录起来。
Ajax学习笔记个人总结
09-12
根据个人学习Ajax的过程总结，整理了Ajax相关基础知识点，对Ajax的使用有较详细的介绍，通过个别举例，可以快速了解Ajax的功能，比较适合初学者入门。
16ajax学习笔记1
08-08
16ajax学习笔记1
那些年，我还在学习Ajax 学习笔记
10-28
Ajax不用说，每个做web开发的同志都知道，因为它是学习web开发必经之路，不管你是做asp.net，还是javaWeb，还是PHP
Ajax学习笔记.zip
09-19
Ajax学习笔记.zip
ajax 学习笔记
04-19
javaScript 的ajax 原理和实现步骤
AJAX学习笔记忘记了看一眼
04-06
AJAX学习笔记忘记了看一眼
【漏洞复现】泛微e-office系统ajax.php接口存在任意文件上传漏洞
最新发布
失心少年
04-18 179
技术文章仅供参考，任何个人和组织使用网络应当遵守宪法法律，遵守公共秩序，尊重社会公德，不得利用网络从事危害国家安全、荣誉和利益，未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。本文所提供的工具仅用于学习，禁止用于其他！泛微 E-Office 9.5版本存在代码问题漏洞，泛微e-office系统ajax.php接口存在任意文件上传漏洞。漏洞链接：http://127.0.0.1/E-mobile/App/Ajax/ajax.php?
家居网购项目（Ajax验证用户名+上传图片）
Sun的个人博客
04-15 730
【代码】家居网购项目（Ajax验证用户名+上传图片）
Ajax学习笔记pink老师
07-29
以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

D之光

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值