一名前端工程师的笔记分享！Js篇（03-13更新）

什么是AJAX？

异步的javascript and xml  ，是一种提供动态交互的网页开发技术。

---

AJAX的作用

当向后台发送少量的数据时，通过AJAX的技术可以实现界面局部刷新，提高程序的运行效率。

ajax技术可以实现整个页面无刷新

---

同步和异步的区别

异步：同时执行，也叫并发执行。（统筹，定时器是异步执行的。生活中的同步是AJAX的异步顺序。）

同步：顺序执行，（js中的代码执行过程就是同步的）。

---

进程和线程

• 进程不等于程序，进程就是程序从开始执行到结束的一个过程。

• 单线程：javascript 就是单线程的 （同步）

• 多线程：多线程 异步 同时执行

---

AJAX的请求方式

• get 从服务器获取数据 传输的数据量小 。

• post 向服务器发送数据 输送的量没有要求 安全性更好 。

---

AJAX请求数据过程

1、准备一个ajax独对象

if（window.XMLHttpRequest）{

ajax = new XMLHttpRequest()；

}else{

ajax = new ActiveXObject（"Microsoft。XMLHTTP"）

}

2、和服务器建立连接----通过open方法

ajax.open("get","url","true");

第一个参数 : 请求方向;

第二个参数 : 请求路径；

第三个参数 : 同步/异步 true 表示异步

3、发送数据

ajax。send（）;

4、服务器相应数据 并将处理结果返回给客户端

通过 onreadystatechange 事件相应服务器的数据

根据 readState 判断数据

//服务器相应数据核实，并将处理的结果返回客户端

ajax.onreadystatechange = function(){

if(ajax.readyState==4){

if(ajax.status == 200){

//交易成功返回数据

alert( ajax.responseText );

}

}

}

---

缓存

计算机中的缓存 ： 是CPU和内存之前的一块存储区 容量小 交换数据速度快

浏览器中的缓存 ： 记录浏览的历史记录的数据

IE浏览器容易出现缓存问题

解决办法 ： 更改URL

ajax.open（"get"，（this.index+1)+".txt?id="+new Date().getTime(),true）;

ajax.open ("get",(this.index+1)+".txt?id="+Math.random（）,true );

---

AJAX的post提交和get提交的区别

post方式需要设置请求头 请求头必须在open下面 注意顺序问题

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

从服务器返回的数据永远都是字符串。

---

同源策略

所谓的同源 就是指 ajax在请求数据时， 保证 协议、域名、端口号 完全一致，才能够通过请求

同源策略是浏览器的一个行业标准，有了同源策略保证用户数据的安全性。

所有的javascript都要遵循这个同源策略的

ajax不能实现跨域请求数据（受同源策略的影响不能实现跨域）

---

jsonp的跨域访问数据

什么是jsonp：

json with padding， 是json的一种数据使用模式，可以通过jsonp实现数据的跨域访问。

jsonp跨域的原理： 通过动态创建script标签，然后设置src的路径为服务器提供的接口路径，通过一个回调函数callback将服务器信息返回。

---

欢迎大家持续关注。号内有多个专题，小程序（持续更新中）,Javascript（持续更新）,Vue（视频）等学习资源。觉得有收获的可以收藏关注，欢迎骚扰，一起学习，共同进步。

---

我的小程序，自律更自由，如果你也喜欢锻炼的话在这里寻找你的小伙伴吧。

一只喜欢锻炼的程序猿，嘿嘿。

你都看到这了，不点个关注就过分了哈～