Skip to content

[js] 第110天 请详细描述AJAX的工作原理 #1023

Open
@haizhilin2013

Description

@haizhilin2013

第110天 请详细描述AJAX的工作原理

Activity

LinStan

LinStan commented on Aug 4, 2019

@LinStan

AJAX是用于网页和服务器进行异步通信的技术。
基本原理是,通过XMLHttpRequest向服务器发送异步请求,获得服务器返回的数据,利用js更新页面。
其核心功能在于XMLHttpRequest对象。
创建一个ajax的步骤大致可以分为以下几步

  • 创建XHMHttpRequest对象
  • 打开链接 (指定请求类型,需要请求数据在服务器的地址,是否异步i请求)
  • 向服务器发送请求(get类型直接发送请求,post类型需要设置请求头)
  • 接收服务器的响应数据(需根据XMLHttpRequest的readyState属性判定调用哪个回调函数)
  • 更新页面
xxf1996

xxf1996 commented on Aug 4, 2019

@xxf1996

@LinStan 有一点需要指正:是XMLHttpRequest对象。

censek

censek commented on Jan 21, 2020

@censek

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

  • 创建对象 (XMLHttpRequest 对象)
  • 请求 (将请求发送到服务器,使用 XMLHttpRequest 对象的 open() 和 send() 方法)
  • 响应 (获得来自服务器的响应,使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性)
  • readyState (onreadystatechange 事件)
xiaoqiangz

xiaoqiangz commented on Jul 4, 2022

@xiaoqiangz

Ajax可以在网页和服务器之间的进行通信,从而达到不进行页面刷新的情况下让页面做到局部更新。
创建Ajax可以分如下几部分:

  1. 创建对象 XMLHttpRequest对象
  2. 发送请求至服务器,xhq有send和open方法,还可以设置请求方式为get/post。
  3. 接收服务器响应,可以监听onreadystatechange或onload事件来处理接口响应。
  4. 页面进行更新,根据接口返回更新页面对应的模块。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    jsJavaScript

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@xiaoqiangz@xxf1996@LinStan@censek

        Issue actions

          [js] 第110天 请详细描述AJAX的工作原理 · Issue #1023 · haizlin/fe-interview