ajax请求js

简介: ajax请求js

ajax 的全称 Asynchronous JavaScript and XML (异步 JavaScript 和 XML)。 ajax 是一种创建交互式网页应用的网页开发技术。其中最核心的依赖是浏览器提供的 XMLHttpRequest 对象,是这个对象使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。实现了在页 面不刷新的情况下和服务器进行交互

方法 描述 new XMLHttpRequest() 生成一个 XMLHttpRequest 对象 open(‘请求类型’ , ’URL’ , ’请求方式’) 1. 请求类型:get、post 2. 请求地址:服务器(文件)位置 3. 请求方式:true 为异步,false 为同步 send() 发送请求 onreadystatechange 该方法可以定义响应执行函数,当 readyState 属性发 生变化时会自动调用该方法。 readyState 交互流程,有 5 个阶段 0. 请求初始化 1. 服务器链接已建立 2. 请求已接收 3. 正在处理请求 4. 请求已完成且响应已就绪

status HTTP 响应状态码 200 :OK(请求成功) 403 :Forbidden(禁止) 404 :Page not found(未找到) responseText 响应文本(返回的数据) setRequestHeader(‘头部名称’ , ‘头部值’) 请求头,向请求添加 HTTP 头部 ajax 使用方法: 1. 创建 XMLHttpRequest 对象 2. 使用 open 方法指定要请求的地址、类型和方式。 3. 使用 send 方法发送请求,如果需要传参: get 方式要将参数拼接到 URL 后边,参数间&分割。例:’index.php?name=张三&age=18’ post 方式可以将参数放到 send()里。例:send(‘name=张三&age=18’) 4. 绑定 onreadystatechange 事件,判断 readyState 和 status 的状态。 5. 接收数据,通过 json 转换使用

let xhr = new XMLHttpRequest();
xhr.open('get','js/index.json',true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
let text = xhr.responseText;
console.log(text);
let data = JSON.parse(text);
console.log(data);
}
};
相关文章
|
1天前
|
XML 前端开发 JavaScript
|
18天前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
54 22
|
25天前
|
JavaScript
Node.js GET/POST请求
10月更文挑战第6天
33 2
Node.js GET/POST请求
|
18天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
36 18
|
18天前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
47 4
|
29天前
|
缓存 JavaScript CDN
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
37 4
|
27天前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
58 1
|
2月前
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
2月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
128 9