Ajax总结

最新推荐文章于 2023-11-28 11:05:59 发布
最新推荐文章于 2023-11-28 11:05:59 发布
阅读量281 收藏 2
点赞数
分类专栏： 前端 文章标签： ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/songduo112/article/details/110925599
版权

目录

为什么学习Ajax

  • 局部更新网页的需求很多
  • 前后端分离式项目开发
  • 有助于理解网络通信、HTTP协议等

创建Ajax

XMLHttpRequest()：这是个构造函数，用于初始化一个XMLHttpRequest对象。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.lovejavascript.com/learnLinkManager/getLearnLinkList', true);
xhr.send();

Ajax方法

xhr.open(method, url, async, user, password)
作用: 通过XMLHttpRequest实例，打开一个请求。
参数:

  • method(String): 请求所使用的HTTP方法; 例如 “GET”, “POST”, “PUT”, "DELETE"等. 如果下个参数是非HTTP(S)的URL,则忽略该参数
  • url(String): 请求访问的URL地址
  • async(Boolean): 配置是否为异步执行，默认值为true; 如果想了解更多请点击ajax的同步与异步
  • user(String): 授权参数
  • password(String): 授权参数
    注意: 在未调用send()前, 再次调用open()方法等同于abort()

xhr.send(data)
说明: 发送请求
参数：
data(String, Array, Object): 发送请求时所需要传递的参数，为空时传递null

xhr.abort()
说明：中止请求

xhr.getAllResponseHeaders()
说明：获取全部响应头信息
注意：需要在onreadystatechange事件函数中使用

xhr.getResponseHeader(headerStr)
说明：获取响应头信息
注意：需要在 onreadystatechange 事件函数中使用
参数：
headerStr: 响应头名称

原文：https://www.jianshu.com/p/cd77920d368c

Ajax属性

xhr.readyState
说明：当前请求的五种状态值，一般在事件函数 onreadystatechange 中作为条件判断，以下是五种状态值及对应说明。

  • 0未打开，xhr.open()方法还未被调用.
  • 1未发送, xhr.send()方法还未被调用.
  • 2已获取响应头,xhr.send()方法已经被调用, 响应头和响应状态已经返回.
  • 3正在下载响应体, xhr.响应体下载中; responseText中已经获取了部分数据.
  • 4请求完成, 整个请求过程已经完毕.

xhr.responseType
说明： 通知服务器，请求所期待反回的数据类型
不同的配置会影响接收返回数据的方式，常用的数据类型有两种，对应的接收属性为：
text => responseText
json => response
不建议配置该项，使用默认字符串进行接收，接收后在客户端自行转换格式。

xhr.timeout
说明: 通过该属性进行超时时长设置，单位为毫秒。超时后会触发 ontimeout 事件
注意: 当前请求为同步请求时，使用该属性会抛异常。

xhr.withCredentials
说明: 跨域请求是否提供凭据(cookie、HTTP认证及客户端SSL证明等)。想了解更多请查看ajax中的withCredentials使用效果。

xhr.upload
说明：该属性指向 XMLHttpRequestUpload 上传对象，通过在该对象上绑定事件来处获取相应的信息。除过 onreadystatechange 事件不可以绑定至 XMLHttpRequestUpload 以象，其它事件均可以绑定

原文：https://www.jianshu.com/p/cd77920d368c

Ajax事件

xhr.onreadystatechange
说明: 监听属性 xhr.readyState ，在该值发生改变后触发并执行事件函数；
示例:

xhr.onreadystatechange = function() {
	if (xhr.readyState !== 4) {
		return;
	}
	if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
		// jquery success(XHR, TS)
		options.success(xhr.response, xhr.status);
	} else {
		// jquery error(XHR, TS, statusText)
		options.error(xhr, xhr.status, xhr.statusText);
	}
};

xhr.onloadstart

说明: 监听开始事件，触发后执行事件函数
示例:

xhr.onloadstart = function(){
	console.log('开始');
}

xhr.onprogress
说明: 监听数据传输进行中事件，触发后执行事件函数
示例:

xhr.onprogress = function(){
	console.log('onprogress');
}

xhr.onabort
说明: 监听请求终止事件，触发后执行事件函数

示例:

xhr.onabort = function(){
	console.log('请求终止');
}

xhr.onerror

说明: 监听请求失败事件，触发后执行事件函数
示例:

xhr.onerror = function(){
`console.log('请求失败');
}

xhr.onload
说明: 监听请求成功事件，触发后执行事件函数
示例:

xhr.onload = function(){
	console.log('请求成功');
}

xhr.ontimeout
说明: 监听请求延迟未完成事件，触发后执行事件函数
示例:

xhr.ontimeout = function(){
	console.log('延迟未完成');
}

xhr.onloadend
说明: 监听请求完成事件，触发后执行事件函数
示例:

xhr.onloadend = function(){
	console.log('请求完成');
}

原文：https://www.jianshu.com/p/cd77920d368c

HTTP协议

  • GET：常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL末尾，以便将信息发送给服务器。
  • POST：常用于向指定资源提交数据进行处理请求(例如提交表单或上传文件)。数据被包含在请求体中(body体)。请求可能会导致新的资源的建立或已有资源的修改。

响应状态码：它以“清晰明确”的语言告诉客户端(浏览器)本次请求的处理结果，一般由3为数字代码组成。

1XX：接收信息正在处理
2XX：正常处理完毕 
   200 OK 请求成功
3XX：附加操作
   301 Moved Permanently 永久重定向
   302 Found 临时重定向
4XX：无法处理
   400 Bad Request 语法错误
   401 Unauthorized 未认证
   403 Forbidden 禁止访问
   404 Not Found 资源未找到
5XX：请求出错
   500 Internal Server Error 服务器故障
   503	Service Unavailiable 服务器繁忙

发送JSON数据

GET无法发送JSON数据。
POST通过修改请求头信息，进行JSON数据发送，通过setRequestHeader()方法进行设置。

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost/register', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({"username":"Jam","password":"123456"}));

// POST四种请求格式
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost/register', true);
var data;
var type = 'formdata';  // json、text、www
if (type === "formdata") {
    data = new FormData();
    data.append("key", "value");
} else if (type === "json") {
    xhr.setRequestHeader("Content-Type", "application/json");
    data = JSON.stringify({"key": "value"});
} else if (type === "text") {
    data = "key=value";
} else if (type === "www") {
    // 这个header 其实是 传统post 表单的格式
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    data = "key=value";
}
xhr.send(data);

发送JSON数据:保证了前后端数据格式统一，方便其前后端操作，并且可以额发送更加复杂的数据结构给后端

Ajax跨域操作

跨域与CORS

浏览器同源策略：是一种约定，它是浏览器最核心也是最基本的安全功能，如果少了同源策略，则浏览器的正常功能可能会受到影响。同源策略要求协议相同、域名相同、端口相同。

  • CORS方案：CORS全称是“跨域资源共享”。它允许浏览器向跨源浏览器，发出xhr请求，从而克服了Ajax只能同源使用的限制，CORS方案只需要由服务器发送一个响应标头即可。
    // 设置响应头信息
ctx.set('Access-Control-Allow-Origin', '*');

JSONP跨域请求数据

  • JSONP方案：JSONP是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题，利用script标签不受同源策略影响实现的。
    // JSONP客户端接收数据
function foo(data){};
// JSONP服务端发送数据
foo(data);

反向代理

  • 反向代理指代理服务器来接受客户端上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给连接的客户端。反向代理可以解决内网安全、负载均衡、跨域请求等。
// demo.html
<script src="javascripts/template-web.js"></script>
<script src="javascripts/axios.min.js"></script>
<script id="tpl-sports" type="text/html">
    {{ each list }}
    <li>
        <div class="sports-list-text">
            <p>{{$value.title}}</p>
            <p><span>{{$value.comment}}评</span></p>
        </div>
        <div class="sports-list-img">
            <img src="{{$value.img}}" alt="">
        </div>
    </li>
    {{ /each }}
</script>
<script>
	axios.post('/list', {
	    page: 0,
	    count: 10
	}).then( (response) => {
	    if (response.data.errcode == 0) {
	        setTimeout( () => {
	            loading.innerHTML = '';
	            sportsList.innerHTML = template( 'tpl-sports', response.data );
	            initBetterScroll();
	        }, 1000);
	    }
	}).catch( (error) => {
	
	});
</script>

// index.js
const fs = require('fs') //node.js内置模块，读取文件
const axios = require('axios');
router.post('/list', async (ctx, next) => {
	var body = ctx.request.body;
	// 使用node.js内置模块引入本地文件
	// var data = fs.readFileSync('./data/list.json');
	// data = JSON.parse(data);
	// var list = data.splice(body.page * body.count, body.count);
	
	// 反向代理
	var response = await axios.get('http://openapi.inews.qq.com/getQQNewsIndexAndItems?chlid=news_news_nba&refer=mobilewwwqqcom&srcfrom=newsapp&otype=json&mergetop=1&ext_action=Fimgurl33,Fimgurl32,Fimgurl30');
	var ids = response.data.idlist[0].ids.map( (v, i) => {
    	return v.id;
  	});
    ids = ids.splice(body.page * body.count, body.count);
    var response = await axios.get('http://openapi.inews.qq.com/getQQNewsNormalContent?refer=mobilewwwqqcom&srcfrom=newsapp&otype=json&&extActionParam=Fimgurl33,Fimgurl32,Fimgurl30&extparam=src,desc', {
	    params: {
	      ids: ids.toString() || ''
	    }
	});
});

Ajax其他功能

上传下载进度、取消请求、请求超时、监听整个请求、文件操作等等

Ajax文件操作

// Ajax上传文件
var param = new FormData();
param.append('filename', file);
axios.post('/api/file', param, {
	headers: {'Content-Type', 'multipart/form-data'}
}).then( (response) => {});

// Ajax响应验证码(blob类型)
ctx.session.code = captcha.text;
ctx.reponse.type = 'image/svg+xml';
ctx.body = captcha.datal;

axios

axios是一个基于promise的HTTP库，可以用在浏览器和Node.js中。从浏览器中创建XMLHttpRequest，从Node.js创建http请求。

npm安装axios:

npm i -S axios

better-scroll

相关方法:
下拉上拉配置：pullDownRefresh，pullUpload，threshold
下拉上拉事件：scrollStart，pullingDown，pullingUp

fetch

fetch新语法：
fetch时一种HTTP数据请求的方式，时XMLHttpRequset的一种替代方案。fetch不是Ajax的进一步封装，而是原生JS。fetch函数就是原生JS，没有使用XMLHttpRequest对象。

fetch('/user').then( (response) => {
	return response.json();
}).then( (data) => {
	console.log(data);
});

fetch优势：

  1. 语法简洁，更加语义化
  2. 基于标准Promise实现，支持async/await
  3. 脱离了XHR，是ES规范里新的实现方式
  4. 无需引入第三方插件

fetch问题：

  1. 404、500等会触发Promise成功状态
  2. 功能薄弱，没有取消请求、超时、进度等
  3. 相比axios在使用上略显复杂
  4. 兼容性差

还需要学习写什么：

  1. Vue、React中如何使用axios进行分离式开发？
  2. Restful API设计理念
  3. mock数据
  4. Ajax工具：Postman等
  5. Ajax防御：CSRF攻击等
  6. 深入了解一门后端语言及一款数据库(node.js，Mongodb, Koa)
Axios POST、GET、多并发请求
xin_bao_long的博客
04-14 1081
Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。 安装 npm install axios --save cnpm install axios --save 使用CDN <script src="https://unpkg.com/axios/dist/axios.min.js"></script> GET请求 axio...
axios get请求 post请求 多个并发请求 传值 后端接值
qq_45916727的博客
10-21 1594
get params:{ id:1, name:'李四’ } //get 传值 axios.get("/get", { params: { id: 20, name: '阿狸' } }).then(d => { alert(d.data) }).catch(e => console.log(e)) post ...
【axios】 get、post、并发请求的简单使用
piano_diano的博客
01-13 200
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axi.
axios 请求方法及并发请求
xiaosi1413的博客
02-20 1317
异步请求的特点： 请求之后页面不动，刷新页面局部，多个请求互不影响，同时进行多个。 基本知识点： 1.基于promise的http库。可以y用在浏览器和nopde.js中， 2.官方下载链接 http://www.axios-js.com/ 3. 安装命令： npm install axios get请求 axios.get(请求接口及参数).then((res)=>{ 请求成功响应 }).catch((err)=>{ 请求失败响应 }) post 请求 axios.po
axios 发送并发请求
weixin_51614564的博客
09-01 417
使用场景：同时发送多个请求，到达之后才会继续写代码，请求之后的结果统一在then 里面处理。
Axios 并发请求指南 - 3 种简单实用的方法
11-28 1658
本文介绍了三种在 Axios 中实现并发请求的方法：使用 Promise.all()、async/await 和 Axios 提供的方法。Axios并发请求的实现很简单，关键是使用 axios.all 发起多个请求，然后使用 axios.spread 分解响应结果。合理使用 Promise 语法可以让我们更优雅地处理并发请求。最后，在实践中还需要注意请求数，错误处理等情况。使用并发请求可以显著提高应用程序的性能和响应速度，但需要注意合理使用，避免过度请求造成的问题。
JavaScript实现Ajax总结
12-03
**总结** Ajax的核心在于XMLHttpRequest对象的使用，通过它与服务器进行异步通信。虽然存在一些缺点，但在优化用户体验方面，Ajax依然是Web开发中的重要技术。理解并掌握Ajax的工作原理和实现方式，对于构建交互性强...
对AJAX总结记录 为什么要用ajax?
最新发布
08-24
对AJAX总结记录 为什么要用ajax?
初学者必看的Ajax总结篇
10-20
Ajax全称为Asynchronous JavaScript and XML，是一种通过在后台与服务器交换少量数据即可实现网页动态更新的技术。它并不是一种新技术，而是利用现有的多种技术，包括HTML或XHTML、CSS、DOM、XML、XSLT、以及最重要...
ajax总结.doc
10-23
一些基础的ajax点，帮助大家在使用ajax的同时，能够更深入的了解和体验。有了Ajax之后，就可以实现在网页不跳转不刷新的情况下，在网页后台提交数据，部分更新页面内容。
第二节：Ajax核心技术 - XMLHttpRequest 对象
孤安先生的博客，作者主站正在重构中，敬请期待！
11-01 793
XHR 1.0 是一个内建的浏览器对象，可以实现 Ajax 请求，Ajax技术的核心就是XMLHttpRequest 对象。
前端面试 - 请求篇
Arui_0的博客
06-13 466
可以请求不同域名下的数据（跨域请求）。 可以获取服务器端的二进制数据。 可以获得数据传输的进度信息。 当然，一般为了友好的进行兼容各个浏览器，会采用对浏览器进行判断并进行兼容性模式来获取XMLHttpRequest的对象 var xhr; if (window.XMLHttpRequest) { // Mozilla, Safari… xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { xhr = new Ac
简单理解XHR、Ajax、Axios、Promise
weixin_52004060的博客
06-07 1348
什么是异步请求？ 请求：客户端向服务器请求数据！ 无异步请求：在完整网页上发送任何请求，都会导致整个页面的全部刷新！ 有异步请求：可以实现网页的局部刷新！ 如何查看网页的异步请求（XHR）？ F12=>Network=>XHR，刷新页面我们可以看到网页所有的XHR（XMLHttpRequest）请求 XHR（XMLHttpRequest）是什么？ XHR是浏览器提供的API，通过该API，简化了异步通信的过程。XHR可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者
AJAX-跨域
weixin_57218747的博客
05-25 217
AJAX 1 原生AJAX 1.1 AJAX 简介 AJAX 全称为Asynchronous Javascript And XML，就是异步的 JS 和 XML。 通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 1.2 XML简介 XML 可扩展标记语言。 XML 被设计用来传输和存储数据。 XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数
XHR的属性
jiaoqi6132的博客
02-23 1631
标准属性 1.XMLHttpRequest.onreadystatechange 当 readyState 属性发生变化时调用的EventHandler。 语法： 只要 readyState 属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState...
XMLHttpRequest使用指南大全
吴孔云的博客
01-10 8336
Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是属于不同维度的2个概念。 以下是我认为对Ajax较为准确的解释：（摘自what is Ajax） AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating
axios学习笔记
weixin_62578531的博客
09-08 106
个人学习的axios笔记，记录了axios的一些基础知识和用法，希望对各位小伙伴有所帮助！！ axios是基于promise对Ajax的一种封装ajax 基于mvcaxios 基于 mvvm。
Ajax和XHR
weixin_51670675的博客
10-16 2081
Ajax是基于浏览器提供的XMLHttpRequest对象的封装 它可以令开发者只向服务器获取数据，而不是HTML文档。
深入理解ajax系列第五篇——进度事件
weixin_33998125的博客
03-15 327
前面的话 　　一般地，使用readystatechange事件探测HTTP请求的完成。XHR2规范草案定义了进度事件Progress Events规范，XMLHttpRequest对象在请求的不同阶段触发不同类型的事件，所以它不再需要检査readyState属性。这个草案定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR操作，但目前也被其他API(如File API)借鉴。本文将详...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值