2021年5月13日星期四

一文搞懂Ajax，附Ajax面试题

Ajax是什么东西？它和JQuery是什么关系？本文带你理解Ajax技术！

目录
  • 前言
  • 正文
    • Ajax是什么东西？
    • 实现核心/工作原理：
    • 创建
  • 发送请求
  • 服务器响应
    • 1. responseText属性
    • 2. response
  • 数据处理
    • 1. readyState 属性
    • 2. onreadystatechange 事件属性
    • 3. status 属性
  • Callback 函数（回调函数）
  • 面试题
    • 1. Ajax是什么？
    • 2. Ajax的优缺点？（请谈一下你对Ajax的认识）
    • 3. HTTP状态码
    • 4. Ajax的工作原理
    • 5. Ajax的最大的特点是什么？
    • 6. 请介绍一下
    • 7. 在浏览器端如何得到服务器端响应的
    • 8.
    • 9. 介绍一下
    • 10. Ajax技术体系的组成部分有哪些？
    • 11. AJAX应用和传统Web应用有什么不同？
    • 12. AJAX请求总共有多少种CALLBACK
    • 13. Ajax和javascript的区别？
    • 14. 如果熟悉某种ajax框架，他可能会问到怎样在程序中使用这种框架。
    • 15. 编程题：写出一个简单的$.ajax()的请求方式？（ JQuery 的 Ajax 模板）
  • 成文参考资料
  • 后记

    • 前言

    大家好呀，我是 白墨，一个热爱学习与划水的矛盾体。

    以前学习Ajax时老师只是在将JQuery的时候简单的用了一下，浅尝辄止。课后也没有深入去了解过，连使用都很不熟练。我甚至一度以为Ajax是JQuery独有的东西……

    今天重新学习了一下，总算理清楚了Ajax是什么东西，以及该怎么使用。

    先简单做一个笔记加深记忆，搬运居多，未来深入了解以后再进行补充。

    正文

    Ajax是什么东西？

    AJAX 可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页。

    AJAX = Asynchronous JavaScript and

    AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

  • 创建对象
  • 发送请求使用open()和send()方法
  • 获得来自服务器的响应，使用responseText或response属性
  • 服务器响应的数据的处理，使用onreadystatechange属性

    • 所以如果想兼容IE5 和 IE6 需要先判断浏览器版本再创建相应的对象。（话说这么老的浏览器真的需要兼容吗？）

    var

    发送请求

    使用 

    //GET 请求
    //POST 请求

    方法与参数解释

    方法描述
    open(method,url,async) 规定请求的类型、URL以及是否异步处理请求。
    method：请求的类型；GET 或 POST
    url：文件在服务器上的位置
    async：true（异步）或 false（同步）
    send(string)将请求发送到服务器。
    string：仅用于 POST 请求，GET请求参数放在 URL 中
    setRequestHeader(header,value)向请求添加 HTTP 头。
    header: 规定头的名称
    value: 规定头的值

    AJAX 指的是异步 JavaScript 和 open()方法的async参数必须设置为true。
    所以，而不是AJAX，切勿弄混。

    注：如果async参数设置为false，即为非异步，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

    服务器响应

    获得来自服务器的响应，主要使用对象的responseText或response属性。

    1. responseText属性

    获得字符串形式的响应数据，直接作为字符串使用。

    document.getElementById("myDiv").innerHTML=

    数据处理

    当请求被发送到服务器时，我们需要执行一些基于响应的任务，主要使用readyState属性和onreadystatechange事件属性。

    1. readyState 属性

    readyState属性翻译过来是就绪状态，存有 状态信息，从 0 到 4 发生变化。

    0: 请求未初始化

    1: 服务器连接已建立

    2: 请求已接收

    3: 请求处理中

    4: 请求已完成，且响应已就绪

    每当readyState改变时，就会触发onreadystatechange事件，所以这两个要结合使用，下面介绍 onreadystatechange 。

    2. onreadystatechange 事件属性

    onreadystatechange事件用于存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
    onreadystatechange事件会被触发 5 次（0 - 4），对应着readyState的每个变化。

    3. status 属性

    status

    status属性表示HTTP请求的返回状态码，因为

    200：正常返回

    404：找不到网页

    500：服务器内部错误

    接下来结合使用：

    //当使用 async=true 时，为onreadystatechange设置函数

    注：异步才需要使用onreadystatechange，即open()方法的async参数设置为true时。如果async为false，把代码放到send()语句后面即可。

    //当使用 async=false 时，代码直接往后放

    到这里

    Callback 函数（回调函数）

    回调函数这玩意儿我还没搞清楚

    但是并不影响我写文，哈哈哈哈哈哈

    callback 函数是一种以参数形式传递给另一个函数的函数。

    如果网站上存在多个 AJAX 任务，就应该为创建 

    //该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：function myFunction(){	load

    >>W3S实例<<

    面试题

    1. Ajax是什么？

    1. AJAX = Asynchronous JavaScript and

    2. Ajax 是一种用于创建快速动态网页的技术。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

    3. Ajax是采用了异步请求的方式，解决了页面无刷新式提交的问题，改善了页面的用户体验效果；常用自动完成提示，注册时用户名重复性校验。

    4. 常用的Ajax框架： Jquery中的ajax

    总结：AJAX直译为异步的JavaScript和

    2. Ajax的优缺点？（请谈一下你对Ajax的认识）

    优点：（为什么要使用Ajax？）

    1. 改善用户体验。 局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验。
    2. 减轻服务器的负担。 按需取数据，最大程度的减少冗余请求，降低服务器端处理开销。
    3. 基于

    缺点：

    1. 存在浏览器兼容性问题。 Ajax大量的使用了javascript和ajax引擎，这些取决于浏览器的支持，在编写的时候要考虑对浏览器的兼容性。
    2. 破坏了浏览器的前进、后退功能。 AJAX只是局部刷新，所以页面的后退按钮是没有用的。
    3. 对搜索引擎不友好。 搜索引擎会屏蔽掉所有js代码，所以ajax载入的的信息不会被搜索引擎收录。
    4. 对流媒体还有移动设备的支持不是太好等。

    3. HTTP状态码

    200 服务器成功返回页面
    404 请求的网页不存在
    503 服务不可用

    100-199 用于指定客户端相应的某些动作。
    200-299 用于表示请求成功
    300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
    400-499 用于支出客户端的错误
    500-599 用于支持服务错误

    4. Ajax的工作原理

    1. 创建ajax对象
    2. 判断数据传输方式 GET/POST
    3. 打开链接 open()
    4. 发送 send()
    5. 当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数

    5. Ajax的最大的特点是什么？

    Ajax可以实现异步提交、局部刷新，这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

    "Google Suggest"就是使用当用户开始输入google的搜索框，Javascript发送用户输入的字符到服务器，然后服务器返回一个建议列表。

    IE中通过new ActiveXObject()创建，Firefox中通过new

    10. Ajax技术体系的组成部分有哪些？

    HTML，css，dom，

    11. AJAX应用和传统Web应用有什么不同？

    简洁陈述版：
    在传统的Web应用的请求/响应为同步模式。即当服务器端在处理客户端请求时，客户端需要等待，直到服务器端响应返回后，客户端才能继续执行。
    而AJAX应用的请求/响应为异步模式，即当服务器端在处理客户端请求时，客户端无须等待可以继续执行；当服务器端响应返回后，客户端进行局部刷新。
    详细说明版：
    在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器端。用户需要点击"Submit"按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。
    因为服务器每次都会返回一个新的页面， 所以传统的web应用有可能很慢而且用户交互不友好。
    使用AJAX技术， 就可以使Javascript通过通过HTTP Request， 一个web页面可以发送一个请求到web服务器并且接受web服务器返回的信息(不用重新加载页面)，展示给用户的还是同一个页面，用户感觉页面刷新，也看不到到Javascript后台进行的发送请求和接受响应。

    12. AJAX请求总共有多少种CALLBACK

    Ajax请求总共有八种Callback

    • onSuccess
    • onFailure
    • onUninitialized
    • onLoading
    • onLoaded
    • onInteractive
    • onComplete
    • onException

    13. Ajax和javascript的区别？

    javascript是一种在浏览器端执行的脚本语言，Ajax是一种创建交互式网页应用的开发技术 ，它利用了一系列相关的技术，其中就包括javascript。

    14. 如果熟悉某种ajax框架，他可能会问到怎样在程序中使用这种框架。

    ASP.NETAjax集成了一套客户端脚本库使得与功能丰富的、基于服务器开发平台的ASP.NET结合在一起。其服务器端编程模型相对于客户端编程模型较为简单，而且容易与现有的ASP.NET程序相结合，通常实现复杂的功能只需要在页面中拖几个控件，而不必了解深层次的工作原理，除此之外服务器端编程的ASP.NETAJAXControlToolkit含有大量的独立AJAX控件和对ASP.NET原有服务器控件的AJAX功能扩展。

    15. 编程题：写出一个简单的$.ajax()的请求方式？（ JQuery 的 Ajax 模板）

    $.ajax({ url:'http://www.baidu.com',	//请求地址 type:'POST',				//Post请求 data:data,					//请求的同时传递过去的数据 cache:true,					//是否高速缓存此页 headers:{}, 			 dataType:'json',			//返回数据类型：

    成文参考资料

    W3S AJAX 教程Statue属性

    后记

    好啦，本文到此结束！如果对你有帮助，可以给我点赞+收藏+关注！你的鼓励是我更新的动力！









    原文转载：http://www.shaoqun.com/a/741773.html

    跨境电商：https://www.ikjzd.com/

    aca：https://www.ikjzd.com/w/1371

    活动树：https://www.ikjzd.com/w/1518


    Ajax是什么东西？它和JQuery是什么关系？本文带你理解Ajax技术！目录前言正文Ajax是什么东西？实现核心/工作原理：创建发送请求服务器响应1.responseText属性2.response数据处理1.readyState属性2.onreadystatechange事件属性3.status属性Callback函数（回调函数）面试题1.Ajax是什么？2.Ajax的优缺点？（请谈一下你对A
    邮乐购物商城：https://www.ikjzd.com/w/1776
    tm商标：https://www.ikjzd.com/w/1069
    史泰博：https://www.ikjzd.com/w/2112
    又撞了！本该在盐田港配载的货物或将延误！：https://www.ikjzd.com/home/98687
    ​返城了，上班了，买不到口罩咋办？你想知道的都在这儿了！：https://www.ikjzd.com/home/115134
    注册亚马逊店铺需要哪些资料，代注册可靠吗？：https://www.ikjzd.com/home/113058

    发帖者 时间：

    没有评论:

    发表评论

    订阅： 博文评论 (Atom)