ajax与Axios

最新推荐文章于 2023-06-21 10:18:40 发布

z逍遥

最新推荐文章于 2023-06-21 10:18:40 发布

阅读量217

点赞数

分类专栏：小知识总结

本文链接：https://blog.csdn.net/zyq51/article/details/108133518

版权

小知识总结专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一、什么是ajax

Async javascript and XML

{
	name:"赵云",
	age:2,
	sex:"未知"
}

<user>
  <name>王超</name>
  <age>2</age>
  <sex>未知</sex>
</user>

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

二、ajax优势

改善的用户体验- AJAX提供的更丰富的用户体验是其主要优点。AJAX允许网页持续更新，但只需要和服务器交互很少的数据。这样，就能在不必整个更新网页的情况下更新网页的一部分。经典的网页技术必须整个更新网页（即使你只想更新某一部分），是笨重的。 AJAX增强了浏览器性能，使更快的浏览成为可能因此提供了有求必应的用户体验。
增强用户生产力- AJAX 库提供了面向对象的辅助函数，能给用户减少麻烦，增强生产力。另外，一个良好配置的ASP.NET应用有它自己的数据访问层和业务层。最后，“鲁棒”的ASP.NET应用包含UI层，在这一层执行服务器端操作。如果你已经包含了这些特性，AJAX只需要一个额外的AJAX服务层和一些客户端特性的改进。这样，开发代价就减小了，用户生产效率也就增加了。流行的站点如亚马逊，谷歌，雅虎等等都在开发中使用了AJAX。
减少带宽的使用并增加速度- AJAX使用客户端脚本来和web服务器通讯，用Javascript来交互数据。使用AJAX能减少网路负载和带宽使用并且只获得你所需的数据。这样能给你更快的接口和更低的响应时间。响应更快因此性能和速度增加了
增强兼容性- AJAX和ASP.NET,J2EE,PHP或者其他任何语言兼容。它几乎支持所有流行的浏览器比如IE5及以上版本，Firefox1.0及以上版本，Safari1.2及以上版本，Opera7.6及以上版本，还有RockMelt。
支持异步处理- 使用XmlHttpRequest来进行异步数据获取，这是AJAX应用的中坚力量。所以，请求能被有效的处理，动态内容加载被提升到一个更高的层次，性能也得到了增强
减少服务器请求和网络负载-Atlas，微软AJAX库的一种较老的形式，是一个整合了客户端Javascript库并且易用的框架，能和ASP.NET一起开发AJAX应用。它提供了跨浏览器支持和面向对象的API，这用来能开发具有最小化服务器请求/网路负载的应用,并能实现异步处理
更容易导航-AJAX应用能被用来简化用户在网页间的过渡，而不需要使用传统的前进后退键

AJAX的缺点

浏览器不兼容-AJAX高度依赖Javascript，而不同的浏览器对Javascript支持性不同。这成了一个问题，尤其是当AJAX必须跨许多浏览器工作的时候。那些不支持Javascript或者不支持Javascript某些选项的浏览器将不能够正常使用ajax。由于ajax对Javascript的依赖性，它不适用移动应用。你的web浏览器的后退键不能如期运行。
不安全性-网页可能很难调试，增加网页的代码量，你的网页更可能遇上严峻的安全威胁。
增加Web服务器的负载-如果你增加一个自动更新的功能，它每隔几秒向服务发起请求，那么就会增加服务器的负载

ajax基本写法及请求分为哪几步

创建一个 XHR 对象（需要考虑浏览器差异）

var request=null;  
if (window.XMLHttpRequest)  
    {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
        xhr=new XMLHttpRequest();  
    } else{// 兼容 IE6, IE5 
        xhr=new ActiveXObject("Microsoft.XMLHTTP");  
}

监听请求成功后的状态变化

request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(request.responseText)
  }
};

第三行的 request.responseText 就是服务器返回的内容了（默认是字符串）

设置请求参数

request.open(method,url,async);

请求的三个参数分别是：请求的方法、请求的地址、和是否采用异步请求。

发送请求

request.send();

同步什么是异步

同步：一个任务执行完成之后才能进行下一个任务。

异步：多个任务可以同时进行。

AJAX的异步：如果我要实现一个在表单中填写用户名时需要后台验证该用户名是否已存在的功能，当我输入用户名之后我可以去执行其他的操作（填写其他的文本框例如密码等）而不用去等后台返回这个用户名是否可用。
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

get和post区别

HTTP

超文本传输协议（HTTP）的设计目的是保证客户机与服务器之间的通信。

HTTP 的工作方式是客户机与服务器之间的请求-应答协议。

web 浏览器可能是客户端，而计算机上的网络应用程序也可能作为服务器端。

举例：客户端（浏览器）向服务器提交 HTTP 请求；服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

GET - 从指定的资源请求数据。

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据

POST - 向指定的资源提交要被处理的数据

POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求

区别

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。

https://www.zhihu.com/question/28586791

JSON.parse()

JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

参数

text

要被解析成 JavaScript 值的字符串

reviver 可选

转换器, 如果传入该参数(函数)，可以用来修改解析生成的原始值，调用时机在 parse 函数返回之前。

指定了 reviver 函数，则解析出的 JavaScript 值（解析值）会经过一次转换后才将被最终返回（返回值）。更具体点讲就是：解析值本身以及它所包含的所有属性，会按照一定的顺序（从最最里层的属性开始，一级级往外，最终到达顶层，也就是解析值本身）分别的去调用 reviver 函数，在调用过程中，当前属性所属的对象会作为 this 值，当前属性名和属性值会分别作为第一个和第二个参数传入 reviver 中。如果 reviver 返回 undefined，则当前属性会从所属对象中删除，如果返回了其他值，则返回的值会成为当前属性新的属性值。

当遍历到最顶层的值（解析值）时，传入 reviver 函数的参数会是空字符串 ""（因为此时已经没有真正的属性）和当前的解析值（有可能已经被修改过了），当前的 this 值会是 {"": 修改过的解析值}，在编写 reviver 函数时，要注意到这个特例。（这个函数的遍历顺序依照：从最内层开始，按照层级顺序，依次向外遍历）

JSON.parse('{"p": 5}', function (k, v) {
    if(k === '') return v;     // 如果到了最顶层，则直接返回属性值，
    return v * 2;              // 否则将属性值变为原来的 2 倍。
});                            // { p: 10 }

JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) {
    console.log(k); // 输出当前的属性名，从而得知遍历顺序是从内向外的，
                    // 最后一个属性名会是个空字符串。
    return v;       // 返回原始属性值，相当于没有传递 reviver 参数。
});

JSON.stringfy()

作用：将json对象转换成json字符串。

语法：JSON.stringify(value [, replacer] [, space])

参数：value 必须；通常为对象或数组。

replacer 可选，用于转换结果的函数或者数组。

space 可选。向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。

返回值：一个包含JSON文本的字符串。

replacer 参数可以是一个函数或者一个数组。作为函数，它有两个参数，键（key）和值（value），它们都会被序列化。

在开始时, replacer 函数会被传入一个空字符串作为 key 值，代表着要被 stringify 的这个对象。随后每个对象或数组上的属性会被依次传入。

函数应当返回JSON字符串中的value, 如下所示:

如果返回一个 Number, 转换成相应的字符串作为属性值被添加入 JSON 字符串。
如果返回一个 String, 该字符串作为属性值被添加入 JSON 字符串。
如果返回一个 Boolean, “true” 或者 “false” 作为属性值被添加入 JSON 字符串。
如果返回任何其他对象，该对象递归地序列化成 JSON 字符串，对每个属性调用 replacer 方法。除非该对象是一个函数，这种情况将不会被序列化成 JSON 字符串。
如果返回 undefined，该属性值不会在 JSON 字符串中输出。

注意: 不能用 replacer 方法，从数组中移除值（values），如若返回 undefined 或者一个函数，将会被 null 取代。

function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
var jsonString = JSON.stringify(foo, replacer);

eval()

eval() 函数会将传入的字符串当做 JavaScript 代码进行执行

console.log(eval('2 + 2'));
// expected output: 4

console.log(eval(new String('2 + 2')));
// expected output: 2 + 2

console.log(eval('2 + 2') === eval('4'));
// expected output: true

console.log(eval('2 + 2') === eval(new String('2 + 2')));
// expected output: false

作用：eval()函数可计算某个字符串，并执行其中的javascript表达式或要执行的语句。

语法：eval(string)

参数： string 必须，需要计算的字符串，其中含有要计算的javascript表达式或要执行的语句。

返回值：返回计算string的值，没有的话不做任何改变返回。

使用eval()函数也可以将JSON字符串解析为对象，这个功能能完成JSON.parse()的功能，但是有不一样的地方

z逍遥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax与Axios

一、什么是ajaxAsync javascript and XML{ name:"赵云", age:2, sex:"未知"}<user> <name>王超</name> <age>2</age> <sex>未知</sex></user>AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX
复制链接

扫一扫