javascript的ajax

已于 2024-05-27 06:53:51 修改
阅读量4k 收藏 9
点赞数 3
分类专栏： 前端开发 文章标签： 前端
于 2023-03-04 22:36:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhiqinzhe/article/details/129340489
版权
本文详细介绍了Ajax的基础知识，包括异步请求、数据格式JSON、跨域解决方案CORS和JSONP，以及XHR对象的属性和方法。还探讨了如何封装Ajax，处理搜索提示、二级菜单等应用场景，并提及了现代库如axios和Fetch的使用。
摘要由CSDN通过智能技术生成

学什么

Ajax基础
JSON
跨域
XHR对象
Ajax进阶
Ajax应用
Ajax扩展

Ajax基础

初识 Ajax
Ajax的基本用法
GET请求
POST请求

JSON

初识JSON
JSON的3种形式
JSON的常用方法

跨域

初识跨域
CORS跨域资源共享
JSONP

XHR 对象

XHR的属性
XHR的方法
XHR的事件

Ajax进阶

FormData
封装Ajax
使用Promise改造封装好的Ajax

Ajax应用

搜索提示
二级菜单
多个Ajax请求的并发执行

Ajax扩展

axios
Fetch

1.初识ajax

Ajax是什么
搭建Ajax开发环境

1.Ajax 是什么

Ajax 是 Asynchronous JavaScript and XML（ 异步 JavaScript 和 XML）的简写
Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据
XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式 
xml标记语言
<person>
    <name>张三</name>
    <age>18</age>
    <sex>男</sex>
</person>
<person>
    <name>李四</name>
    <age>28</age>
    <sex>女</sex>
</person>
XML 现在已经不怎么用了，现在比较 常用的是 JSON
Ajax 其实就是浏览器与服务器之间的一种异步通信方式
使用 Ajax 可以在不重新加载整个页面的情况下，对页面的某部分进行更新

比如

① B站注册检测
② B站搜索提示

2.搭建 Ajax 开发环境

Ajax 需要服务器环境，非服务器环境下，很多浏览器无法正常使用 Ajax
windows phpStudy
Mac MAMP

2.Ajax的基本用法

  • XMLHttpRequest

  • Ajax的使用步骤

  • 使用Ajax完成前后端通信

1.XMLHttpRequest


console.log(Ajax); ×
// Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，它是一个构造函数
// 不论是 XMLHttpRequest，还是 Ajax，都没有和具体的某种数据格式绑定

2.Ajax 的使用步骤

2.1.创建 xhr 对象

const xhr = new XMLHttpRequest();
2.2.监听事件，处理响应
当获取到响应后，会触发 xhr 对象的 readystatechange 事件，可以在该事件中对响应进行处理 

xhr.addEventListener('readystatechange', () => {}, fasle);
//readystatechange 事件也可以配合 addEventListener 使用，不过要注意，IE6~8 不支持 addEventListener
//为了兼容性，readystatechange 中不使用 this，而是直接使用 xhr
//由于兼容性的原因，最好放在 open 之前

//xhr.readyState 是xhr的自身的状态码
// 0：未初始化。尚未调用 open()
// 1：启动。已经调用 open()，但尚未调用 send()
// 2：发送。已经调用 send()，但尚未接收到响应
// 3：接收。已经接收到部分响应数据
// 4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了

xhr.onreadystatechange = () => {
    
    
    if (xhr.readyState !== 4) return;

    // HTTP CODE
    // 获取到响应后，响应的内容会自动填充 xhr 对象的属性
    // xhr.status：HTTP  200 404
    // xhr.statusText：HTTP 状态说明 OK Not Found
    if ((xhr.status >= 200) && (xhr.status < 300) || xhr.status === 304) {
        // console.log('正常使用响应数据');
        console.log(xhr.responseText);
    }
};
2.3.准备发送请求
调用 open 并不会真正发送请求，而只是做好发送请求前的准备工作 

xhr.open(
    'HTTP 方法 GET、POST、PUT、DELETE',
    '地址 URL https://www.imooc.com/api/http/search/suggest?words=js ./index.html ./index.xml ./index.txt',
    true
);
//由于兼容性的原因，最好放在 open 之前
2.4.发送请求
调用 send() 正式发送请求
send() 的参数是通过请求体携带的数据 

xhr.send(null);
 //传递null兼容

3.使用 Ajax 完成前后端通信


const url = "https://www.imooc.com/api/http/search/suggest?words=js";

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.responseText);
        console.log(typeof xhr.responseText);
    }
};

xhr.open("GET", url, true);

xhr.send(null);

3.GET请求

  • 携带数据

  • 数据编码

1.携带数据

GET 请求不能通过请求体携带数据，但可以通过请求头携带 

const url = "https://www.imooc.com/api/http/search/suggest?words=js&username=yunmu&age=18";

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.responseText);

    }
};

xhr.open("GET", url, true);
//不会报错，但不会发送数据
xhr.send("sex=female");

//类似与form表单的提交方式
<form action="https://www.imooc.com/api/http/search/suggest" method="get">
    <input type="text" name="username" />
    <input type="text" name="words" />
    <input type="password" name="password" />
    <input type="submit" value="提交" />
</form>

2.数据编码

如果携带的数据是非英文字母的话，比如说汉字，就需要编码之后再发送给后端，不然会造成乱码问题
可以使用 encodeURIComponent() 编码 

const url = `https://www.imooc.com/api/http/search/suggest?words=${encodeURIComponent(
    "前端"
)}`;

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.responseText);
    }
};

xhr.open("GET", url, true);
//不会报错，但不会发送数据
xhr.send();

4.POST请求

  • 携带数据

  • 数据编码

1.携带数据

POST 请求主要通过请求体携带数据，同时也可以通过请求头携带 

// POST 请求主要通过请求体携带数据，同时也可以通过请求头携带
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {
    if (xhr.readyState != 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.responseText);
    }
};

xhr.open("POST", url, true);

// 如果想发送数据，直接写在 send() 的参数位置，一般是字符串 保持与form表单传递数据格式一致
xhr.send('username=yunmu&age=18');

<form
      action="https://www.imooc.com/api/http/search/suggest?words=js"
      method="post"
      >
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" value="提交" />
</form>

不能直接传递对象，需要先将对象转换成字符串的形式


xhr.send({
    username: "yunmu",
    age: 18
});
// [object Object]

2.数据编码


xhr.send(`username=${encodeURIComponent('云牧')}&age=18`);

5.JSON

1.初识JSON

  • JSON是什么

  • 为什么需要JSON

1.JSON 是什么

JSON 全称是 JavaScript Object Notation
Ajax 发送和接收数据的一种格`式 

{"code":200,"data":[{"word":"jsp"},{"word":"js"},{"word":"json"},{"word":"js \u5165\u95e8"},{"word":"jstl"}]}

2.为什么需要 JSON

JSON 有 3 种形式，每种形式的写法都和 JS 中的数据类型很像，可以很轻松的和 JS 中的数据类型互相转换 

// JS->JSON->PHP/Java
// PHP/Java->JSON->JS

2.JSON的3种形式

  • 简单值形式

  • 对象形式

  • 数组形式

1.简单值形式

json文件后缀为.json
JSON 的简单值形式就对应着 JS 中的基础数据类型
数字、字符串、布尔值、null 

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.responseText);
        console.log(typeof xhr.responseText);
    }
};

//请求本地的json数据
xhr.open("GET", "./plain.json", true);

xhr.send(null);
6
true
false
"str"
null

注意事项

① JSON 中没有 undefined 值
② JSON 中的字符串必须使用双引号
③ JSON 中是不能注释的

2.对象形式

JSON 的对象形式就对应着 JS 中的对象

注意事项

JSON 中对象的属性名必须用双引号，属性值如果是字符串也必须用双引号
JSON 中只要涉及到字符串，就必须使用双引号
不支持 undefined 

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.responseText);
        console.log(typeof xhr.responseText);
    }
};


xhr.open("GET", "./obj.json", true);


xhr.send(null);
{
	"name":"云牧",
	"age":18,
	"hobbies":["唱歌","看电影"],
	"family":{
		"brother":"夕颜"
	}
}

3.数组形式

JSON 的数组形式就对应着 JS 中的数组

注意事项

数组中的字符串必须用双引号
JSON 中只要涉及到字符串，就必须使用双引号
不支持 undefined 

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.responseText);
        console.log(typeof xhr.responseText);
    }
};


xhr.open("GET", "./arr.json", true);


xhr.send(null);

[6,null,true,false,"yunmumu"]
//这里不能写undefined 虽然能够获取到  但是后期转换成js对应的数据类型会有问题

[
    {
        "id": 1,
        "username": "夕颜",
        "comment": "666"
    },
    {
        "id": 2,
        "username": "云牧",
        "comment": "999 6翻了"
    }
]

3.JSON的常用方法

  • JSON.parse()

  • JSON.stringify()

  • 使用JSON.parse()和JSON.stringify()封装localStorage

1.JSON.parse()

JSON.parse() 可以将 JSON 格式的字符串解析成 JS 中的对应值
一定要是合法的 JSON 字符串，否则会报错 

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(JSON.parse(xhr.responseText));
        console.log(JSON.parse(xhr.responseText).data);
        console.log(xhr.responseText);
    }
};

xhr.open("GET", "https://www.imooc.com/api/http/search/suggest?words=js", true);
xhr.open("GET", "./index.json", true);

xhr.send(null);

2.JSON.stringify()

JSON.stringify() 可以将 JS 的基本数据类型、对象或者数组转换成 JSON 格式的字符串 

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {

        console.log(xhr.responseText);
    }
};

xhr.open("POST", "https://www.imooc.com/api/http/search/suggest?words=js", true);

//xhr.send({
    //username:"yunmu",
//age:18
//});
console.log(
    JSON.stringify({
        username: "yunmu",
        age: 18,
    })
);

xhr.send(
    JSON.stringify({
        username: "yunmu",
        age: 18,
    })
);

3.使用 JSON.parse() 和 JSON.stringify() 封装 localStorage


const Storage = window.localStorage;
// 设置
const set = (name,value) => {
	Storage.setItem(name, JSON.stringify(value));
}

// 获取
const get = (name) => {
	return JSON.parse(Storage.getItem(name))
}

// 删除
const remove = (name) => {
	Storage.removeItem(name)
}

// 清空
const clear = () => {
	Storage.clear();
}

export {set, get, remove, clear};

import {set, get, remove, clear} from "./localStorage.js";

set("user1",{
    name:"夕颜",
    school:"中心小学",
    feature:"憨憨"
})
set("user2",{
    name:"云牧",
    school:"中心大学",
    feature:"比憨憨聪明"
})


console.log(get("user1"));
console.log(get("user2"));

6.跨域

  • 跨域是什么

  • 什么是不同域，什么是同域

  • 跨域请求为什么会被阻止

  • 跨域解决方案

1.跨域是什么


// 同域，不是跨域
//const url = './index.html';


// 不同域，跨域，被浏览器阻止
const url = 'https://www.baidu.com';
const xhr = new XMLHttpRequest();


// 向一个域发送请求，如果要请求的域和当前域是不同域，就叫跨域
// 不同域之间的请求，就是跨域请求

xhr.onreadystatechange = () => {
    if (xhr.readyState != 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.responseText);
    }
};

xhr.open('GET', url, true);

xhr.send(null);

2.什么是不同域，什么是同域

https（协议）: //www.shiguangkey.com（域名）:443（端口号）/course/list（路径）
协议、域名、端口号，任何一个不一样，就是不同域
与路径无关，路径一不一样无所谓

不同域


https://www.shiguangkey.com:443/course/list
http://www.shiguangkey.com:80/course/list

http://www.shiguangkey.com:80/course/list
http://m.shiguangkey.com:80/course/list
http://shiguangkey.com:80/course/list

同域


http://shiguangkey.com:80
http://shiguangkey.com:80/course/list

3.跨域请求为什么会被阻止

阻止跨域请求，其实是浏览器本身的一种安全策略--同源策略
其他客户端或者服务器都不存在跨域被阻止的问题

4.跨域解决方案

① CORS 跨域资源共享
② JSONP
优先使用 CORS 跨域资源共享，如果浏览器不支持 CORS 的话，再使用 JSONP

4.CORS 跨域资源共享

  • CORS 是什么

  • 使用CORS 跨域的过程

  • CORS的兼容性

1.CORS 是什么


//const url = 'https://www.baidu.com';

const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {
    if (xhr.readyState != 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.responseText);
    }
};

xhr.open('GET', url, true);

xhr.send(null);

**Access-Control-Allow-Origin: ***

表明允许所有的域名来跨域请求它，* 是通配符，没有任何限制

只允许指定域名的跨域请求

Access-Control-Allow-Origin: http://127.0.0.1:5500

2.使用 CORS 跨域的过程

① 浏览器发送请求
② 后端在响应头中添加 Access-Control-Allow-Origin 头信息
③ 浏览器接收到响应
④ 如果是同域下的请求，浏览器不会额外做什么，这次前后端通信就圆满完成了
⑤ 如果是跨域请求，浏览器会从响应头中查找是否允许跨域访问
⑥ 如果允许跨域，通信圆满完成
⑦ 如果没找到或不包含想要跨域的域名，就丢弃响应结果

3.CORS 的兼容性

IE10 及以上版本的浏览器可以正常使用 CORS

5.JSONP

  • JSONP的原理

  • 使用JSONP 实现跨域

1.JSONP 的原理

script 标签跨域不会被浏览器阻止
JSONP 主要就是利用 script 标签，加载跨域文件

2.使用 JSONP 实现跨域

服务器端准备好 JSONP 接口 

 https://www.imooc.com/api/http/jsonp?callback=handleResponse
手动加载 JSONP 接口或动态加载 JSONP 接口 

<script>
    //声明函数
    const handleResponse = (data) => {
        console.log(data);
    } 
    //  动态加载 JSONP 接口
    //  const script = document.createElement("script");
    // script.src =
    //  "https://www.imooc.com/api/http/jsonp?callback=handleResponse";
    // document.body.appendChild(script);

</script>

//手动加载 JSONP接口
<script src="https://www.imooc.com/api/http/jsonp?callback=handleResponse"></script>

7.XHR对象

XHR的属性

  • responseType和response属性

  • timeout属性

  • withCredentials 属性

1.responseType 和 response 属性


const url =
      "https://www.imooc.com/api/http/search/suggest?words=js";
const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {
    if (xhr.readyState != 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        // 文本形式的响应内容
        //  responseText 只能在没有设置 responseType 或者 responseType = "" 或 "text" 的时候才能使用
        // console.log('responseText:', xhr.responseText);

        //可以用来替代 responseText
        console.log('response:', xhr.response);
    }
};

xhr.open("GET", url, true);

//默认的响应类型
//xhr.responseType = "";
//xhr.responseType = "text";
xhr.responseType = 'json';

xhr.send(null);
IE6~9 不支持，IE10 开始支持

2.timeout 属性

设置请求的超时时间（单位 ms） 

const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {
    if (xhr.readyState != 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {

        console.log(xhr.response);
    }
};

xhr.open("GET", url, true);

xhr.timeout = 10000;

xhr.send(null);
IE6~7 不支持，IE8 开始支持

3.withCredentials 属性

指定使用 Ajax 发送请求时是否携带 Cookie
使用 Ajax 发送请求，默认情况下，同域时，会携带 Cookie；
跨域时，不会 如果要跨域携带 xhr.withCredentials = true;
最终能否成功跨域携带 Cookie，还要看服务器同不同意 

//const url = './index.html';
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';


const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {
    if (xhr.readyState != 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {

        console.log(xhr.response);
    }
};

xhr.open("GET", url, true);

xhr.withCredentials = true;

xhr.send(null);
IE6~9 不支持，IE10 开始支持

XHR的方法

  • abort()

  • setRequestHeader()

1.abort()

终止当前请求
一般配合 abort 事件一起使用 

const url = 'https://www.imooc.com/api/http/search/suggest?words=js';


const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {
    if (xhr.readyState != 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {

        console.log(xhr.response);
    }
};

xhr.open("GET", url, true);

xhr.abort();//这里不能终止请求

xhr.send(null);

xhr.abort();

2.setRequestHeader()

可以设置请求头信息
xhr.setRequestHeader(头部字段的名称, 头部字段的值); 

//const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
const url = 'https://www.imooc.com/api/http/json/search/suggest?words=js';

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {
    if (xhr.readyState != 4) return;

    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {

        console.log(xhr.response);
    }
};

xhr.open("POST", url, true);

//请求头中的 Content-Type 字段用来告诉服务器，浏览器发送的数据是什么格式的
//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('Content-Type', 'application/json');

//xhr.send('username=alex&age=18');
xhr.send(
    JSON.stringify({
        username: "yunmu"
    })
);

XHR的事件

  • load事件

  • error 事件

  • abort事件

  • timeout 事件

1.load 事件

响应数据可用时触发 

const url = "https://www.imooc.com/api/http/search/suggest?words=js";
const xhr = new XMLHttpRequest();

// xhr.onload = () => {
//   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
//     console.log(xhr.response);
//   }
// };

xhr.addEventListener(
    "load",
    () => {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.response);
        }
    },
    false
);

xhr.open("GET", url, true);

xhr.send(null);
IE6~8 不支持 load 事件

2.error 事件

请求发生错误时触发 

const url = "https://www.imooc.com/api/http/search/suggest?words=js";
//const url = "https://www.iimooc.com/api/http/search/suggest?words=js";

const xhr = new XMLHttpRequest();

xhr.addEventListener(
    "load",
    () => {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.response);
        }
    },
    false
);
xhr.addEventListener(
    "error",
    () => {
        console.log("error");
    },
    false
);

xhr.open("GET", url, true);

xhr.send(null);
IE10 开始支持

3.abort 事件

调用 abort() 终止请求时触发 

const url = "https://www.imooc.com/api/http/search/suggest?words=js";

const xhr = new XMLHttpRequest();

xhr.addEventListener(
    "load",
    () => {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.response);
        }
    },
    false
);
xhr.addEventListener(
    "abort",
    () => {
        console.log("abort");
    },
    false
);

xhr.open("GET", url, true);

xhr.send(null);

xhr.abort();
IE10 开始支持

4.timeout 事件

请求超时后触发 

const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

const xhr = new XMLHttpRequest();

xhr.addEventListener(
    'load',
    () => {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.response);
        }
    },
    false
);
xhr.addEventListener(
    'timeout',
    () => {
        console.log('timeout');
    },
    false
);

xhr.open('GET', url, true);

xhr.timeout = 10;

xhr.send(null);
IE8 开始支持

8.封装ajax

1.使用 Ajax 提交表单


<form
      id="login"
      action="https://www.imooc.com/api/http/search/suggest?words=js"
      method="POST"
      enctype="multipart/form-data"
      >
    <input type="text" name="username" placeholder="用户名" />
    <input type="password" name="password" placeholder="密码" />
    <input id="submit" type="submit" value="登录" />
</form>

<script>
    const login = document.getElementById('login');
    // console.log(login.username);
    // console.log(login.password);
    const { username, password } = login;
    const btn = document.getElementById('submit');

    const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

    btn.addEventListener(
        "click",
        e => {
            // 阻止表单自动提交
            e.preventDefault();

            // 表单数据验证

            // 发送 Ajax 请求
            const xhr = new XMLHttpRequest();

            xhr.addEventListener(
                'load',
                () => {
                    if (
                        (xhr.status >= 200 && xhr.status < 300) ||
                        xhr.status === 304
                    ) {
                        console.log(xhr.response);
                    }
                },
                false
            );

            xhr.open('POST', url, true);

            // 组装数据
            // const data = `username=${username.value}&password=${password.value}`;

            // FormData 可用于发送表单数据
            const data = new FormData(login);
            // console.log(data);
            data.append('age', 18);
            data.append('sex', 'male');
            // for (const item of data) {
            //   console.log(item);
            // }

            // xhr.setRequestHeader(
            //   'Content-Type',
            //   'application/x-www-form-urlencoded'
            // );

            xhr.send(data);

        },
        false
    );

</script>

2.FormData 的基本用法


// 通过 HTML 表单元素创建 FormData 对象
// const fd = new FormData(表单元素);
// xhr.send(fd);

// 通过 append() 方法添加数据
// const fd = new FormData(表单元素);
// fd.append("age", 18);
// fd.append("sex", "male");
// xhr.send(fd);

// IE10 及以上可以支持

3.封装ajax

ajax



//默认参数
import DEFAULTS from "./deafaults.js";
//工具函数
import { serialize, addURLData, serializeJSON} from "./utils.js";
//常量
import {
    HTTP_GET,
    COTENT_TYPE_FORM_URLENCODED,
    COTENT_TYPE_JSON,
} from "./constants.js";

//Ajax类
class Ajax {
    constructor(url, options) {
        this.url = url;
        this.options = Object.assign({}, DEFAULTS, options);

        //初始化
        this.init();
    }

    //初始化
    init() {
        const xhr = new XMLHttpRequest();

        this.xhr = xhr;

        //绑定事件的响应程序
        this.bindEvent();

        //准备发送请求
        xhr.open(this.options.method, this.url + this.addParam(), true);

        //设置responseType
        this.setResponseType();

        //设置超时
        this.setTimeout();

        //设置跨域是否携带 cookie
        this.setCookie();

        //发送请求
        this.sendData();
  }

    //绑定事件的响应程序
    bindEvent() {
        const xhr = this.xhr;

        const { success, httpCodeError, error, abort, timeout } = this.options;

        //load
        xhr.addEventListener("load", () => {
            if (this.ok()) {
                success(xhr.response, xhr);
            } else {
                httpCodeError(xhr.status, xhr);
            }
        });

        //  error
        xhr.addEventListener("error", () => {
            error(xhr);
        });

    //abort
    xhr.addEventListener("abort", () => {
      abort(xhr);
    });

    //  timeout
    xhr.addEventListener("timeout", () => {
      timeout(xhr);
    });
  }

    //检测状态码是否正常
    ok() {
        const xhr = this.xhr;
        return (xhr.status >= 200 && xhr.status < 300) || xhr.status === 304;
    }

    //  在地址上添加数据
    addParam() {
        const { params } = this.options;

        if (!params) return "";

        return addURLData(this.url, serialize(params));
    }

    //  设置responseType
    setResponseType() {
        this.xhr.responseType = this.options.responseType;
    }

    //设置超时
    setTimeout() {
        const { timeoutTime } = this.options;

        if (timeoutTime > 0) {
            this.xhr.timeout = timeoutTime;
        }
    }

    //设置跨域是否携带 cookie
    setCookie() {
        if (this.options.withCredentials) {
            this.xhr.withCredentials = true;
        }
    }

    //发送请求
    sendData() {
        const xhr = this.xhr;

        if (!this.isSendData()) {
            return xhr.send(null);
        }

      let resultData = null;
      const { data } = this.options;

      // 发送 FormData 数据
      if(this.isFormData()){
          resultData = data;

      }else if(this.isFormURLEncodedData()){
          //发送form-urlencoded格式的数据
          this.setContentType(COTENT_TYPE_FORM_URLENCODED)
          resultData = serialize(data);

      }else if(this.JSONData()){
          this.setContentType(COTENT_TYPE_JSON)
          //发送JSON格式的数据
          resultData = serializeJSON(data);
      }else{
          this.setContentType();
          //其他格式的数据
          resultData = data;
      }


      return xhr.send(resultData)
  }

    //  是否需要使用sendData发送数据
    isSendData() {
        const { data, method } = this.options;

        if (!data) return false;

        if (method.toLowerCase() === HTTP_GET.toLowerCase()) return false;

        return true;
    }

    //判断是否 发送 FormData格式的数据
    isFormData(){
        return this.options.data instanceof  FormData;
    }

    //判断是否发送 application/x-www-form-urlencoded 格式的数据
    isFormURLEncodedData(){
        return this.options.cotentType.toLowerCase().includes(COTENT_TYPE_FORM_URLENCODED);
    }

    //判断是否发送的是否是 JSON 格式的数据
    JSONData(){
        return this.options.cotentType.toLowerCase().includes(COTENT_TYPE_JSON);
    }

    // 设置发送的数据格式ContentType
    setContentType(contentType = this.options.conetntType){
        if(!contentType) return;

        this.xhr.setRequestHeader("Content-Type", contentType);
    }

    //获取XHR对象
    getXHR(){
        return this.xhr;
    }
}

export default Ajax;

//new Ajax()

deafaults


//默认参数
import {HTTP_GET, COTENT_TYPE_FORM_URLENCODED, COTENT_TYPE_JSON} from "./constants.js";
const DEFAULTS = {
    method: HTTP_GET,

    //请求头携带的数据
    params: null,
    //params:{
    //	username:yunmu,
    //	age:18
    //}

    //username=yunmu&age=18

    //请求体携带数据
    data: null,

    //data:{
    //	username:yunmu,
    //	age:18
    //}

    //data: FormData数据

    // 属性
    cotentType: COTENT_TYPE_FORM_URLENCODED,
    responseType:"",
    timeoutTime:0,
    withCredentials:false,

    //方法
    success(){},
    httpCodeError(){},
    error(){},
    abort(){},
    timeout(){}
}

export default DEFAULTS;

utils


// 工具函数
const serialize = param => {
    const results = [];

    for(const [key, value] of Object.entries(param)){

        results.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);

    }

    return results.join("&");

    //["username=yunmu","age=18"]
    //"username=yunmu"&"age=18"
}

//www,baidu.com&

//给URL添加参数
const addURLData = (url, data) => {
    if(!data) return "";

    const mark = url.includes("?") ? "&" : "?";

    return `${mark}${data}`;
}



//序列化成JSON格式的字符串
const serializeJSON = (data) => {
    return JSON.stringify(data);
}

export {serialize, addURLData, serializeJSON};

constants


//常量模块
export const HTTP_GET = "GET";

export const COTENT_TYPE_FORM_URLENCODED = "application/x-www-form-urlencoded";

export const COTENT_TYPE_JSON = "application/json";



export const ERROR_HTTP_CODE = 1;
export const ERROR_HTTP_CODE_TEXT = 'HTTP 状态码异常';
export const ERROR_REQUEST = 2;
export const ERROR_REQUEST_TEXT = '请求被阻止';
export const ERROR_TIMEOUT = 3;
export const ERROR_TIMEOUT_TEXT = '请求超时';
export const ERROR_ABORT = 4;
export const ERROR_ABORT_TEXT = '请求终止';

index


import Ajax from "./ajax.js";

//常量
import {
    ERROR_HTTP_CODE,
    ERROR_HTTP_CODE_TEXT,
    ERROR_REQUEST,
    ERROR_REQUEST_TEXT,
    ERROR_TIMEOUT,
    ERROR_TIMEOUT_TEXT,
    ERROR_ABORT,
    ERROR_ABORT_TEXT,
} from "./constants.js";

const ajax = (url, options) => {
    //return new Ajax(url, options).getXHR();
    let xhr;
    const p = new Promise((resolve, reject) => {
        xhr = new Ajax(url, {
            ...options,
            ...{
                success(response) {
                    resolve(response);
                },
                httpCodeError(status) {
                    reject({
                        type: ERROR_HTTP_CODE,
                        text: `ERROR_HTTP_CODE_TEXT:${status}`,
                    });
                },

                error() {
                    reject({
                        type: ERROR_REQUEST,
                        text: ERROR_REQUEST_TEXT,
                    });
                },

                abort() {
                    reject({
                        type: ERROR_ABORT,
                        text: ERROR_ABORT_TEXT,
                    });
                },

                timeout() {
                    reject({
                        type: ERROR_TIMEOUT,
                        text: ERROR_TIMEOUT_TEXT,
                    });
                },
            },
        }).getXHR();
    });


    p.xhr = xhr;
    p.ERROR_HTTP_CODE = ERROR_HTTP_CODE;
    p.ERROR_REQUEST = ERROR_REQUEST;
    p.ERROR_TIMEOUT = ERROR_TIMEOUT;
    p.ERROR_ABORT = ERROR_ABORT;

    return p;
};

const get = (url, options) => {
    return ajax(url, { ...options, method: "GET" });
};

const post = (url, options) => {
    return ajax(url, { ...options, method: "POST" });
};

const getJSON = (url, options) => {
    return ajax(url, { ...options, method: "GET", responseType: "json" });
};

export { ajax, get, post, getJSON };

9.ajax的应用

搜索提示


<input id="search" type="text" />
<ul id="result"></ul>

<script type="module">
    import { getJSON } from './ajax/index.js';

    const searchInput = document.getElementById('search');
    const resultList = document.getElementById('result');

    const url = 'https://www.imooc.com/api/http/search/suggest?words=';

    const handleInputEvent = () => {
        if (searchInput.value.trim() !== '') {
            getJSON(`${url}${searchInput.value}`)
                .then(response => {
                console.log(response);
                // [{word: "jsp"}]

                let html = '';
                for (const item of response.data) {
                    html += `<li>${item.word}</li>`;
                }

                resultList.innerHTML = html;

                resultList.style.display = '';

                // resultList.innerHTML = '<li>jsp</li><li>js</li>';
            })
                .catch(err => {
                console.log(err);
            });
        } else {
            resultList.innerHTML = '';
            resultList.style.display = 'none';
        }
    };

    let timer = null;
    // IE9 开始支持
    searchInput.addEventListener(
        'input',
        () => {
            // handleInputEvent();

            if (timer) {
                clearTimeout(timer);
            }
            // jsa
            timer = setTimeout(handleInputEvent, 500);
        },
        false
    );
    </script>

二级菜单



<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>二级菜单</title>
        <style>
            /* css reset */
            * {
                padding: 0;
                margin: 0;
            }
            li {
                list-style: none;
            }

            /* menu */
            .menu {
                width: 100px;
                background-color: rgba(0, 0, 0, 0.1);
                margin: 10px;
            }
            .menu-item {
                position: relative;
                padding: 5px;
                cursor: pointer;
            }
            .menu-content {
                display: none;
                position: absolute;
                left: 100%;
            top: 0;
                width: 200px;
                height: 100px;
                padding: 0 5px;
                background-color: rgba(0, 0, 0, 0.1);
            }
            .menu-item:hover {
                background-color: rgba(0, 0, 0, 0.4);
            }
            .menu-item:hover .menu-content {
                display: block;
            }
            .menu-loading {
                margin: 45px 0 0 92px;
            }
        </style>
    </head>
    <body>
        <ul id="menu" class="menu">
            <!-- <li class="menu-item" data-key="hot" data-done="done">
<span>热门</span>
<div class="menu-content">
<p><img class="menu-loading" src="./loading.gif" alt="加载中" /></p>
</div>
</li> -->
        </ul>

        <script type="module">
            // https://www.imooc.com/api/mall-PC/index/menu/hot
            // https://www.imooc.com/api/mall-PC/index/menu

            import { getJSON } from './ajax/index.js';
            const menuURL = 'https://www.imooc.com/api/mall-PC/index/menu';
            const menuEl = document.getElementById('menu');

            getJSON(menuURL)
              .then(repsonse => {
              // console.log(repsonse);

              let html = '';

              for (const item of repsonse.data) {
                  html += `
<li class="menu-item" data-key="${item.key}">
<span>${item.title}</span>
<div class="menu-content">
<p><img class="menu-loading" src="./loading.gif" alt="加载中" /></p>
          </div>
          </li>
`;
              }

              menuEl.innerHTML = html;

              // [{key: "hot", title: "热门出发地", subTitles: Array(5)}]

              // ...
          })
              .then(() => {
              const items = menuEl.querySelectorAll('.menu-item');

              for (const item of items) {
                  item.addEventListener(
                      'mouseenter',
                      () => {
                          // console.log(item.getAttribute('data-key'));

                      // IE11 开始支持
                      // console.log(item.dataset.key);

                      if (item.dataset.done === 'done') return;

                      getJSON(
                          `https://www.imooc.com/api/mall-PC/index/menu/${item.dataset.key}`
                      )
                     .then(repsonse => {
                     // console.log(repsonse);

                     // [{title: "内地热门城市", cities: Array(27)}]

                     item.dataset.done = 'done';

                     let html = '';

                     for (const item of repsonse.data) {
                         html += `<p>${item.title}</p>`;
                     }

                          item.querySelector('.menu-content').innerHTML = html;
                      })
                          .catch(err => {
                          console.log(err);
                      });
                      },
                      false
                  );
              }
            })
                .catch(err => {
                console.log(err);
            });
        </script>
    </body>
</html>

多个ajax请求并发执行



<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>多个 Ajax 请求的并发执行</title>
        <style>
            /* css reset */
            * {
                padding: 0;
                margin: 0;
            }
            li {
                list-style: none;
            }

            /* menu */
            .menu {
                width: 100px;
                background-color: rgba(0, 0, 0, 0.1);
                margin: 10px;
            }
            .menu-item {
                position: relative;
                padding: 5px;
                cursor: pointer;
            }
            .menu-content {
                display: none;
                position: absolute;
                left: 100%;
                top: 0;
                width: 200px;
                height: 100px;
                padding: 0 5px;
                background-color: rgba(0, 0, 0, 0.1);
            }
            .menu-item:hover {
                background-color: rgba(0, 0, 0, 0.4);
            }
            .menu-item:hover .menu-content {
                display: block;
            }
            .menu-loading {
                margin: 45px 0 0 92px;
            }

            /* loading-page */
            .loading-page {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1000;
                background-color: #eee;
                text-align: center;
            }
            .loading-img {
                position: absolute;
                top: 50%;
            }
            .ad img {
                display: inline-block;
                width: 25%;
            }
            .none {
                display: none;
            }
      </style>
    </head>
    <body>
        <div id="loading-page" class="loading-page">
            <img class="loading-img" src="./loading.gif" alt="加载中" />
        </div>

        <div id="ad" class="ad"></div>

        <ul id="menu" class="menu">
            <!-- <li class="menu-item" data-key="hot" data-done="done">
<span>热门</span>
<div class="menu-content">
<p><img class="menu-loading" src="./loading.gif" alt="加载中" /></p>
</div>
</li> -->
        </ul>
        <script type="module">
            import { getJSON } from './ajax/index.js';

            const menuURL = 'https://www.imooc.com/api/mall-PC/index/menu';
            const adURL = 'https://www.imooc.com/api/mall-PC/index/ad';

            const loadingPageEl = document.getElementById('loading-page');
            const adEl = document.getElementById('ad');
            const menuEl = document.getElementById('menu');

          const p1 = getJSON(menuURL)
          .then(repsonse => {
              // console.log(repsonse);

              let html = '';

              for (const item of repsonse.data) {
                  html += `
<li class="menu-item" data-key="${item.key}">
<span>${item.title}</span>
<div class="menu-content">
<p><img class="menu-loading" src="./loading.gif" alt="加载中" /></p>
          </div>
          </li>
`;
              }

              menuEl.innerHTML = html;

            // [{key: "hot", title: "热门出发地", subTitles: Array(5)}]

            // ...
        })
      .then(() => {
          const items = menuEl.querySelectorAll('.menu-item');

          for (const item of items) {
              item.addEventListener(
                  'mouseenter',
                  () => {
                      // console.log(item.getAttribute('data-key'));

                      // IE11 开始支持
                      // console.log(item.dataset.key);

                        if (item.dataset.done === 'done') return;

                        getJSON(
                            `https://www.imooc.com/api/mall-PC/index/menu/${item.dataset.key}`
                        )
                            .then(repsonse => {
                            // console.log(repsonse);

                            // [{title: "内地热门城市", cities: Array(27)}]

                            item.dataset.done = 'done';

                            let html = '';

                    for (const item of repsonse.data) {
                        html += `<p>${item.title}</p>`;
                    }

                    item.querySelector('.menu-content').innerHTML = html;
                })
                    .catch(err => {
                    console.log(err);
                });
              },
                false
            );
          }
        })
      .catch(err => {
          console.log(err);
      });

        const p2 = getJSON(adURL)
        .then(response => {
            // console.log(response);
            // [{ url: 'http://alimc.img.imooc.com/class/' }];

            let html = '';
            for (const item of response.data) {
                html += `<img src="${item.url}" alt="" />`;
            }
            adEl.innerHTML = html;
        })
        .catch(err => {
            console.log(err);
        });

        Promise.all([p1, p2]).then(() => {
            // loadingPageEl.style.display = 'none';

            // IE10 开始支持
            loadingPageEl.classList.add('none');
            // loadingPageEl.classList.remove('none');
        });
      </script>
    </body>
</html>

// 1.axios 是什么
// axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中
// 第三方 Ajax 库

// http://www.axios-js.com/zh-cn/docs/

// 2.axios 的基本用法
// 引入 axios
// console.log(axios);

const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
// axios(url, {
//   method: 'post',

//   // 请求时的头信息
//   headers: {
//     'Content-Type': 'application/x-www-form-urlencoded'
//     // 'Content-Type': 'application/json'
//   },

//   // 通过请求头携带的数据
//   params: {
//     username: 'alex'
//   },

//   // 通过请求体携带的数据

//   // application/json
//   // data: {
//   //   age: 18,
//   //   sex: 'male'
//   // }

//   // application/x-www-form-urlencoded
//   data: 'age=18&sex=male'

//   // timeout: 10

//   // withCredentials: true
// })
//   .then(response => {
//     console.log(response);
//     console.log(response.data.data);
//   })
//   .catch(err => {
//     console.log(err);
//   });

// axios
//   .get(url, {
//     params: {
//       username: 'alex'
//     }
//   })
//   .then(response => {
//     console.log(response);
//   });

// axios
//   .post(url, 'username=alex&age=18')
//   .then(response => {
//     console.log(response);
//   })
//   .catch(err => {
//     console.log(err);
//   });

axios
    .post('https://www.imooc.com/api/http/json/search/suggest?words=js', {
    username: 'alex'
})
    .then(response => {
    console.log(response);
})
    .catch(err => {
    console.log(err);
});

// axios.put()
// axios.delete()

// 1.Fetch 是什么
// Fetch 也是前后端通信的一种方式
// Fetch 是 Ajax（XMLHttpRequest）的一种替代方案，它是基于 Promise 的

// Ajax 的兼容性比 Fetch 好

// abort timeout

// 2.Fetch 的基本用法
// console.log(fetch);
// console.log(ajax);

// fetch() 调用后返回 Promise 对象
const url = 'https://www.imooc.com/api/http/search/suggest?words=js';

// body: (...)
// bodyUsed: false
// ok: true
// status: 200
// statusText: "OK"
// type: "cors"
// url: "https://www.im

// 第二个参数是对象，用来配置 fetch
const fd = new FormData();
fd.append('username', 'alex');
fetch(url, {
    method: 'post',
    // body: null
    // body: 'username=alex&age=18',
    // body: JSON.stringify({ username: 'alex' })
    body: fd,
    // headers: {
    //   // 'Content-Type': 'application/x-www-form-urlencoded'
    //   'Content-Type': 'application/json'
    // }
    mode: 'cors'
    // credentials:'include'
})
    .then(response => {
    console.log(response);

    // body/bodyUsed
    // body 只能读一次，读过之后就不让再读了

    // ok
    // 如果为 true，表示可以读取数据，不用再去判断 HTTP 状态码了

    if (response.ok) {
        // console.log(response.json());

        return response.json();
              // return response.text();
          } else {
              throw new Error(`HTTP CODE 异常 ${response.status}`);
          }
      })
          .then(data => {
          console.log(data);
      })
          .catch(err => {
          console.log(err);
        });
JavaScript之Ajax
TSORA-C的博客
05-28 650
JavaScript之Ajax什么是ajax?工作原理优缺点注意点及适用和不适用场景跨域 什么是ajax? Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。 Ajax 是一种用于创建快...
ajax 原生js操作ajax
热门推荐
fagdg的博客
07-25 1万+
1.不需要插件支持（一般浏览器且默认开启JavaScript即可）；2.用户体验极佳（不刷新页面即可获取可更新的数据）；3.提升Web程序的性能（在传递数据方面做到按需放松，不必整体提交）；4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；...
JavaScript学习笔记（十三）：网络请求JS AJAX
最新发布
wz_1992的博客
08-15 766
回调函数是作为参数传递给另一个函数的函数。在这种情况下，回调函数应包含响应准备就绪时要执行的代码。// 当响应准备就绪时要做什么。
JavaScript实现Ajax
ciguanpeng7618的博客
08-02 553
1：基本概念 jQuery的Ajax请求实际上是封装的一个XHLHttpRequest，从字面意思来看是，XML是一种文件格式，Http是一个网络请求，Request最开始是用于请求XML文件的，后来不断扩展可以请求多种类型的文件。 XHLHttpRequest，网络请求模块，或者是一个浏览器...
JavaScript中的Ajax
weixin_43466575的博客
04-10 6490
（1）什么是AjaxAjax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。描述：不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。功能：用于实现与服务器进行异步交互的功能。用js来实现页面的局部刷新。（2）Ajax工作流程。
javascript-ajax：JavaScript Ajax
02-18
JavaScript AJAX（Asynchronous JavaScript and XML）是Web开发中一种用于创建动态、交互性网页的技术。它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，极大地提升了用户体验。AJAX的...
分享5个顶级的JavaScript Ajax组件库
10-18
AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。其核心是通过JavaScript的XMLHttpRequest对象来向服务器发送异步请求，从而实现页面内容的局部刷新。这种...
autocomplete:本机 javascript ajax 和自动完成插件
06-07
本机 javascript ajax 和自动完成插件 演示链接 如何使用 < link rel =" stylesheet " href =" css/template.css " > < script type =" text/javascript " src =" ajax.js " > </ script > < ...
javaScript Ajax
07-11
ppt 学习资源这是一个很好的ppt资源
JavaScript-AJAX
yhwl66的博客
05-10 457
ajax （asynchronous JavaScript and xml）异步的JavaScript和xml（传输格式为xml 但一般为json），它主要是用于请求对应的数据来帮助渲染。优先使用强制缓存 如果没有强制缓存 使用协商缓存如果强制缓存了 那么协商缓存就不会被使用 且不会有请求发送如果没有强制缓存那么对应的协商缓存就会触发 主要比对的是最后修改时间和对应的文件标识如果都比对比成功那么就是使用协商缓存，如果没有比对上那么就不会缓存。
JavaScript的AJAX
不睡觉的怪叔叔的博客
12-24 3312
一、传统的前后端交互方式 1.1、异步和同步的概念 同步（synchronous） —— 指一个时间段内系统只能有一个进程在执行 异步（asynchronous） —— 指一个时间段内系统可以有多个进程在执行 1.2、传统前后端交互的原理 传统的前后端交互过程： 传统的前后端交互方式（无AJAX）是同步交互的方式，同步的过程只允...
Javascript中的ajax
Knight7890的博客
06-02 648
我想大家应该都知道，弹幕这个概念吧，举个最简单的例子，比如lol直播，上面会弹出好多的用户发表的观点，这就是ajax的异步加载，其目的在于“不刷新、不跳转”页面的情况下通过服务器请求异步完成。 这样可以降低服务器的负载，减少用户等待时间，加快响应速度。 而ajax的核心了，xmlhttpRequest,简称xhr(小黄人)，这个东西名字一大堆，到底是个什么鬼呢？ 其实很好理解，咋们把它拆开，xml指的是可扩展标记语言，和json类似，json是一种文件的格式，这个要是你不知道，赶紧去百度。
JavaScript:Ajax
weixin_30746117的博客
08-02 115
Ajax不是一种新的编程语言，而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下，与服务器交换数据。这种异步交互的方式，使用户单击后，不必刷新页面也能获取新数据。 XMLHttpRequest对象 Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。 在浏览器中创建对象(只支持IE7及更高...
JavaScript实现ajax
weixin_41198447的博客
07-27 1711
实现ajax请求
JavaScript-Ajax
chenlian0400的博客
08-05 168
Ajax通信与数据格式无关，从服务器获取的数据不一定是XML数据。 Ajax的核心：XMLHttpRequest对象(简称XHR) 在XHR对象之前，Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架。 XHR对象为向服务器发送信息和解析服务器响应提供了流畅的接口。 1....
JavaScript实现Ajax详解
陈铁锋的博客
02-24 786
Ajax Ajax，是Asynchronous  JavaScript + XML 的简写，可以实现页面的局部刷新。虽然 Ajax 中的 x 代表的是 XML，但 Ajax 通信和数据格式无关，所以传输的数据格式不一定使用 XML。 XMLHttpRequest Ajax 技术核心是XMLHttpRequest 对象(简称 XHR)。 IE7+、Firefox、Opera、Chrome 和
JavaScript AJAX编程实践与应用详解
"JavaScript Ajax编程应用篇主要讲解了如何在JavaScript中实现Ajax技术，包括创建XHR对象和使用方法，特别适合对Ajax感兴趣的开发者参考学习。" 在JavaScript中，Ajax（Asynchronous JavaScript and XML）是一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

知勤者笔记

给点吧，没动力了！

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

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

打赏作者

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

抵扣说明：

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

余额充值