我是靠谱客的博主 甜蜜星月,最近开发中收集的这篇文章主要介绍Ajax原理及相关面试题总结Ajax原理及相关面试题总结,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

Ajax原理及相关面试题总结

AJAX 是一种通过向服务器异步发送请求,获取数据,并在不需要重新刷新当前页面的情况下局部更新数据的web开发技术。 Ajax相当于是用户和服务器之间的中间层,它使得用户操作和服务器响应异步化。不是所有用户请求都需要向服务器提交,某些数据验证和 数据处理都交由服务器自己完成的,只有在需要获取新数据时才会由Ajax引擎代为向服务器发送请求。Ajax原理简单的来说就是,利用XMLHttpRequest对象来向服务器发送异步请求,从服务器获取数据,在由JavaScript操作 Dom来更新页面。

特点及优缺点

最大的特点:Ajax可以实现动态不刷新(局部刷新),就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。

优势:

  1. 通过异步模式,提升了用户体验
  2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
  3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
  4. 不需要插件的⽀持,原⽣ js 就可以使⽤

缺点:

  1. ajax不支持浏览器back按钮。
  2. 安全问题 AJAX暴露了与服务器交互的细节。
  3. 对搜索引擎的支持比较弱。
  4. 破坏了程序的异常机制。
  5. 不容易调试。

Ajax过程

  1. //创建 XMLHttpRequest 对象,

    var ajax = new XMLHttpRequest();

  2. //规定请求的类型、URL 以及是否异步处理请求。

    ajax.open('GET',url,true);

  3. //发送信息至服务器时内容编码类型

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

  4. //发送请求

    ajax.send(null);

  5. //接受服务器响应数据

    ajax.onreadystatechange = function () {

    if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {

    }

    };

GET,POST两种请求方式的区别

代码上:

1:get通过url传递参数

2:post设置请求头 规定请求数据类型

使用上:

1:post比get安全

(因为post参数在请求体中。get参数在url上面)

2:get传输速度比post快 根据传参决定的。

(post通过请求体传参,后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)

3:post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右

4:get获取数据 post上传数据

(上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)

XMLHttpRequest对象

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在IE5中首次引入,它是一种支持异步请求的技术。XmlHttpRequest使程序员可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新。

属性:
readyState:XHR对象的状态
0:未初始化,对象已创建,但未调用open
1:open方法已经调用,但send方法还未调用
2:send方法已经调用,但还未接收数据
3:正在接收数据,HTTP响应头已经接收数据,但未接收完成
4:响应数据接收完成
onreadyStatechange:
请求状态改变的事件触发器(readyState改变时就会触发这个属性上的js函数)
responseTEXT
服务器响应的文本内容
responseXML
服务器响应的XML内容对应的Dom对象
stauts
服务器返回的http状态码:常见的有200:成功;404:未找到;500:表示服务器内部错误
stautsTEXT
服务器返回状态的文本信息

方法:

方法
open
指定和服务器间交互的方法,包含三个参数(提交方式,文件路径,异步传输)
send
向服务器发送请求,如果采用异步方式,就会立即返回。参数(content),content如果指定未null就表示不发送数据,其内容可以是dom对象也可以是输入流或字符串
setRequestHeader
设置http请求的指定头部的header的值为value。参数(header,value)该方法在open后调用,一般在post方式中使用
abort
停止http请求,会将XMLHttpRequest对象复位到未初始化的状态

最后

以上就是甜蜜星月为你收集整理的Ajax原理及相关面试题总结Ajax原理及相关面试题总结的全部内容,希望文章能够帮你解决Ajax原理及相关面试题总结Ajax原理及相关面试题总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(39)

评论列表共有 0 条评论

立即
投稿
返回
顶部