AJAX 简介

1.AJAX 简介

1.1同步和异步

 * (一): 同步与异步
       * 1. 同步: 顺序执行, 优点: 静态预判结果可控, 缺点: 耗时任务阻塞执行
       * 2. 异步: 乱序执行, 优点: 不会阻塞代码,体验好, 缺点: 顺序不可控
       *
       * 以银行排队办业务为例
       * 1. 同步: 默认排队叫号, 依次办理
       * 2. 异步: 耗时任务(如修改密码忘带身份证)则离开队列, 后面任务继续
       * 3. 任务队列: 取了身份证回来了, 就待在"任务队列"中等待再次叫号
       *
       * 哪些是异步任务(耗时)?
       * 1. 定时任务: setTimeout, setInterval
       * 2. 事件监听: addEventListener
       * 3. 网络请求: ajax, promise,fetch
       * 4. 文件读写等涉及IO的操作

1.2 什么是JSON

 // 1. json是通用的,轻量化的 "数据交互格式",用于 "前后端数据通信"
      // 2. json独立于编程语言,本质是一个格式化字符串
      // 3. json借用了js对象字面量的语法,简洁高效,已替代了传统的xml格式
      // 4. json不是js对象, 但它可以与js对象之间相互转换

      // 数据类型:
      // 1. 简单类型: number, string, boolean, null
      // 2. 数组: [...]
      // 3. 对象: {...}, 这是关注的重点

      // 不支持 undefined ,没意义的

      // json: 本质就是js对象的序列化, 字符串表示

      // 1. js对象 ->  json -> 后端php/java

1.3 什么是AJAX

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

总结:
AJAX就是传递数据的工具,JSON就是传递数据的格式,html先渲染页面,内部细节由AJAX从服务器获得,数据通过JSON传递

2.AJAX创建对象

xmlhttp = new XMLHttpRequest()

XMLHttpRequest 对象用于和服务器交换数据。类似于工具

3.AJAX 向服务器发送请求

基本步骤:

创建工具xml = new XMLHttpRequest() -> 建立联系xmlhttp.open("GET","ajax_info.txt",true);
-> 发送请求xmlhttp.send();

方法 描述
open(method,URL,flag,name,password); 1. method:该参数用于指定HTTP的请求方法,一共有get、post、head、put、delete五种方法,常用的方法为get和post。2 URL:该参数用于指定HTTP请求的URL地址,可以是绝对URL,也可以是相对URL。- flag:该参数为可选,参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步、false表示同步,默认为true。- name:该参数为可选参数,用于输入用户名。如果服务器需要验证,则必须使用该参数。- password:该参数为可选,用于输入密码。若服务器需要验证,则必须使用该参数
send(string) string:仅用于 POST 请求

4.AJAX服务器响应

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

5.AJAX - onreadystatechange 事件

onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。

每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性:

你可能感兴趣的:(大前端,ajax,javascript,ecmascript)