ajax

前后端交互流程

一个服务器可以启动多个服务，用端口号区分，不可以同时启动两个相同的端口号服务 一个服务有多个接口，通过url地址区分 工作流程： 前端发送请求，服务端做响应

前端向服务器发送请求有多少种方案

1.方案一：ajax 2.方案二：jsonp 3.方案三：fetch

ajax是如何发送请求的

基于 XMLHttpRequest 实例对象 调用 open send 等api 监听事件行为 处理交互过程

浏览器是如何发送请求的 1.通过【请求地址】找接口

• 404 没找到 地址错误 或者找到了【没响应】 2.按照接口要求接口接通接口
• 要求一：指定【请求方式】 get post pull delete
• 要求二；需要【请求参数】数据格式有所不同 例如 json格式 json字符串 json对象等

以上都满足后：接口接通 服务器处理请求 ---》服务端开发人员的工作

浏览器怎么接收响应 1.怎么接受 1.1响应内内容，全部放在 XMLHttpRequest对象中 1.2通过监听【响应事件】 XMLHttpRequest.onreadystatechange 1.3在响应事件处理函数内部：处理响应数据 - XMLHttpRequest.status 获取响应数据 - XMLHttpRequest.readyStatus 获取状态 - XMLHttpRequest.respose/resposeTest 获取【响应体】中数据 （json 数or xml） 2.怎么处理？ 2.1根据dom结构：分析页面需要的数据结构 2.2将响应数据添加工处理 得到 符合页面【数据结构】 2.3通过事件处理 完成js动态交互 3.注意事项 交互是异步的 事件处理函数 ajax请求 响应处理需要等待响应成功;在处理;

• 1 dom处理在响应处理函数里面写
• 2:要么在回掉函数中处理dom,在响应处理函数中【执行回调函数】,并传入实参响应数据;
• 在回掉函数的方法体中接收【响应数据】，并进行dom处理 接收响应后做什么处理

ajax发送请求的有多少种方案

get post

ajax怎么用

ajax具体内容

• onprogress:可能会在请求的过程中多次调用,在监测文件上传进度时可以使用此属性.

• onerror:请求过程中发生错误时出发此事件处理程序.

• onabort:请求中断会触发此事件处理处理程序.

• onload:请求执行成功后会触发此事件处理程序.

• onloadstart:请求开始时触发此事件处理程序.

• onloadend:请求完成是触发此事件处理程序,onload是必须要成功才会调用.

• onreadystatechange：指定当readyState属性改变时的事件处理句柄

• ontimeout 此属性为请求超时的事件处理程序,请求超时，触发此方法.

• readyState 只读属性,表示整个异步请求中的状态,其存在五个可能的值.

• response 只读属性,此属性返回服务端的响应内容,客户端可以通过xhr.responseType指定响应内容的类型.

• responseText 只读属性,此属性为xhr.response的一个特例,返回的响应内容为text类型.如果指定了xhr.

• responseType定义响应内容(即xhr.response)的类型,其值为枚举类型,分别为:arraybuffer,blob,document,json,text.如果传入的值为空字符串,则默认为text.

• responseURL 返回序列化后的响应URL.

• responseXML 返回被转化为XML格式的响应内容,以下情况将返回null.

  • 请求不成功
  • 还未执行xhr.send()方法
  • 响应内容不能被转换为XML或者HTML

• status 返回响应的状态码,请求成功返回的状态码为200,状态码存在的可能值列表请点击状态码列表查看.

• timeout设置请求的超时毫秒数，当请求的时长超出了响应的毫秒数,请求会自动中断.如果是在IE浏览器中,该属性的设置需要在open()方法之后和send()方法之前.

• ontimeout此属性为请求超时的事件处理程序,请求超时，触发此方法.

沟通问题

我认为你应该了解以下几个页面 ajax交互分为哪一个阶段？分别是什么

• 【0】请求准备中 open()之前
• 【1】发送请求了 open() ~ send（）之后 客户端 触发onreadystatechange
• 【2】服务器处理中 （java开发做的事）
• 【3】响应发出中 （如果响应是java开发的工作）
• 【4】响应成功。浏览器接收响应 客户端 触发onreadystatechange

0 1 4 前端开发工作 2 3 服务端开发工作

注意： 以上状态码 可以通过 xhr对象xhr.redyState 获取的

http状态码 代表了通信中

• 200交互成功
• 400前端bug
• 404 地址错误85% 或者没有响应15%
• 500 服务器错误

数据驱动视图

1：保证数据一定是获取到的

• 从Network 看是否发送请求。在preview 看是否有响应信息 【没有数据】常见错误
• 404 请求没发送，这是前端问题；url 地址错误
• 跨域拦截。解决方式 jsop是实现同源策略，获取让服务端人员，给你添加一个请求头
• 如果服务器没接受到请求，那么一定是前端问题，可能问题：有
• url错误
• 参数错误 ，数据格式问题（1.form-data 2.x-www.form-urlencoded 3. 文件格式数据）
• 请求方式错误
• 请求头问题，少见
• 解决方式：找到这些东西的来源；一个一个排查；倒着排错

请求发送了；但是没有数据响应

• 错误一定发生在服务端。找服务器开发人员；让他给你解决

有数据视图渲染出现问题: 1:查看响应事件处理函数是否执行 - 随便在事件处理函数中输出内容 2：查看是否能浏览器中获取数 - 直接输出数据查看 3：查看数据处理是否正确定；json 数的转化 - 输出数据查看 4：请求成功后；数据的业务处理；函数是否执行 - 与请求成功或者失败的判断条件有关 5：看业务处理函数业务为逻辑是否正确

• 与 js 数据处理 if for dom 有关 以上经验丰富的 可以 debug 调试 打断点

遇到看不懂错误；百度查询 谷歌查询

面试问题

ajax请求机制

三次握手 四次挥手

ajax 请求原理

基于xmlHttpRequest属性 三次握手四次挥手的处理