JS-----------Ajax

目录

传统网站存在的问题

ajax概述 阿贾克斯

异步和同步的区别

Ajax运行原理

ajax的实现步骤

请求报文

Ajax的其他方法和Ajax配置信息

请求传参的几种格式

get/post区别

同源政策

扩展        

思维导图

传统网站存在的问题

• 网速慢点情况下,页面加载时间长,用户只能等待
• 表单提交后,如果一项内容不合格,需要重新填写所有的表单内容
• 页面跳转,重新加载页面,造成资源浪费,增加用户等待时间

ajax概述 阿贾克斯

• Ajax 它本身不是一种技术
• Ajax是利用JavaScript脚本改变web应用与服务器端之间数据交互的一种方式（异步加载页面）。
• 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
• 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验

异步和同步的区别

同步需要等待返回结果才能继续，异步不必等待

同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕

Ajax运行原理

ajax相当于浏览器发送请求与响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验

ajax的实现步骤

 1.创建ajax对象基于HttpRequest创建HTTP请求

+XML传输内容的数据格式   + HttpRequest网络请求.创建xhr实例

var xhr=new XMLHttpRequest();

2.建立连接,打开一个url地址(发送请求前的一些配置)

xhr.open(method,url,async);

• method：请求类型，分为get和post方式；格式为字符串；
• get: (get: 一般多用于获取数据/delete：删除请求/head：获得报文首部/options：询问支持的方式)

一般是从服务器中获取数据，但是也可以传参数【取的多，给的少】

• post:(post: 主要提交表单数据和上传文件/put对数据全部进行更新/patch只对更改过的数据进行更新)

一般是给服务器发送数据,基于请求体传数据【取得少，给的多】

双方约定俗称的区别        

•         - GET请求传递给服务器的信息基于URL问号传参，POST是基于请求主体传数据
•         - GET传输内容有大小限制【原因是URL长度有限制】超出这个长度信息会被自动截掉,这样导致传输的内容过多,最后服务器收到的信息是不完整的
•         - POST相对于GET来讲更安全【相对安全，互联网面前人人都在"裸奔"】post理论上是没有限制的,但是传递的东西越多,速度越慢,可能浏览器会报传输时的错误,所以实际上我们会自己手动做限制
•         - GET或产生不可控的缓存,两次及以上请求相同的api接口,并且传递的参数也一样,浏览器可能会把第一次请求的信息直接返回,而不是从服务器获取最新数据【保证每次请求的地址和参数不完全一直(URL末尾加随机数/时间戳)】

URL:请求的url地址

async:是否采用异步,默认是true

.3 注册监听 获取服务器与客户端响应的数据 监听请求的过程,在不同的阶段做不同的处理

 xhr.onreadystatechange=function(){
    if(xhr.readyState===4&&(xhr.status===200||xhr.status===304)){
            		console.log(xhr.responseText);
    }
  }

1. xhr.response 响应主体信息「服务器返回啥格式就是啥格式」
2. xhr.responseText 以字符串格式获取
3. xhr.responseXML 以XML格式获取
4. xhr.responseType 存储服务器返回数据的格式  空字符串{默认}、“arraybuffer”、“blob”、“document”、“json”、“text” 这些格式就是服务器支持的返回给客户端的数据格式
5. xhr.status 返回的HTTP状态码
6. xhr.statusText 状态码的描述
7. xhr.readState//获取ajax状态码
8. onreadstatechange事件 当ajax状态码发生变化时自动触发该事件
9. onload:信息返回http状态码不一定是200
10. onerror信息没有返回可能断网了

区分ajax状态码和http状态码

• ajax状态码:表示ajax请求的过程