ajax面试要点

目录

目录

• 目录
  • ajax是什么？
    • 优点
    • 缺点
  • ajax的工作原理
  • 如何创建一个ajax（ajax的交互模型）
    • ajax过程中get和post的区别
      • get：
      • post:
  • 同步和异步的区别
  • JavaScript 的同源策略
  • 如何解决跨域问题
    • jsonp方法：
  • json是什么？
    • 优点
    • ajax请求时 如何解析json数据?
  • jsonp是什么？
    • 原理
    • 和ajax区别
  • jq中$.ajax()的常用参数有哪些

ajax是什么？

异步无刷新技术
作用：主要实现客户端和服务端异步通信，实现页面局部刷新

优点

1. 局部刷新，无需重新刷新页面
2. 异步请求，不妨碍用户浏览页面或者其他操作
3. 基于标准被广泛支持
4. 前端和后端负载平衡。最大程度的减少冗余请求和响应，提高站点性能

缺点

1. 不支持浏览器back按钮
2. 暴露了服务器交互细节
3. 对搜索引擎的支持比较弱
4. 破坏了程序的异常处理机制
5. 不能很好支持移动设备

ajax的工作原理

浏览器让xhr去向服务端要数据
浏览器接着干其他事情
xhr去向服务器请求数据
服务器返回数据给xhr
xhr通知浏览器数据回来
浏览器收到xhr返回的数据渲染页面

xhr是什么 ？
浏览器内置对象 ”XMLHttpRequest ” AJAX就是通过浏览器的内置对象XHMHttpResquest来发送异步请求的，异步请求不会妨碍客户端的任何操作。
参考博客：https://www.cnblogs.com/weichao1996/p/9079028.html

如何创建一个ajax（ajax的交互模型）

//创建XMLHttprequest对象，异步调用对象
var xhr=new XMLHttpRequest();
//创建一个新的Http请求，并且指定该Http的请求方法 url及验证信息
xhr.open("get","路径",true);
//设置相应Http请求状态变化函数
xhr.onreadystartchange=function(){
//readystate是当前的状态值
//status是Http的状态码 200表示ok
    if(xhr.readyState==4&xhr.status==200){
    //获取到异步返回的数据，使用js dom 实现局部刷新
     console.log(xhr.responseText)
}
}

xhr.send();

ajax过程中get和post的区别

get：

常用于查询操作

1. url地址有长度限制
2. 请求的参数都暴露在url地址当中 安全性较低
3. 如果传递中文参数，需要自己进行编码操作

post:

主要用来提交数据

1. 没有数据长度的限制
2. 提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。安全性能更高

同步和异步的区别

同步： 实时处理（如打电话）
可以理解为在执行完一个函数或方法之后，一直等待系统返回值或消息，这时程序是出于阻塞的，只有接收到返回的值或消息后才往下执行其他的命令。

异步： 分时处理（如收发短信）
执行完函数或方法后，不必阻塞性地等待返回值或消息，只需要向系统委托一个异步过程，那么当系统接收到返回值或消息时，系统会自动触发委托的异步过程，从而完成一个完整的流程。

JavaScript 的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
协议：http,ftp
端口名：80:http协议的默认端口/https:默认端口是8083
主机名：localhost
麻烦：ajax在不同域名下的请求无法实现

如何解决跨域问题

jsonp方法：

服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案

json是什么？

JSON是一种轻量级的数据交换格式，ECMA的一个子集

优点

数据格式简单, 易于读写, 占用带宽小

ajax请求时 如何解析json数据?

前端解析后端数据：前端在解析后端发来的数据,使用JSON.parse()方法把字符串转为json对象.
前端向后端发送数据数据：前端在向后端发送数据,使用JSON.stringify()方法把json对象转为字符串.

jsonp是什么？

jsonp是用来解决跨域获取数据的一种解决方案

原理

具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术

和ajax区别

1. 本质区别
ajax的核心是通过xmlHttpRequest获取非本页内容
jsonp的核心是动态添加script标签调用服务器提供的js脚本（后缀.json)。
2.联系
jsonp是为了解决ajax禁止跨域的问题，但jsonp并不排斥同域的数据的获取。
3. 支持请求方式不同
jsonp只支持get请求，ajax支持get和post请求。

jq中$.ajax()的常用参数有哪些

type
默认值: "GET"。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

url
默认值: 当前页地址。发送请求的地址。

success
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件。

async
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

data
发送到服务器的数据。将自动转换为请求字符串格式

dataType
可用值:
• "xml": 返回 XML 文档，可用 jQuery 处理。
•"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
•"script": 返回纯文本 JavaScript
•"json": 返回 JSON 数据 。
• "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
• "text": 返回纯文本字符串

error
请求失败时调用此函数。
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
这是一个 Ajax 事件。