当前位置：首页 > article >正文

AJAX 简介

article 2024/11/18 10:55:24

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 请求

方法

描述

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 请求