[Web 前端] 030 ajax 是什么

AJAX 是什么

1. AJAX 是一种“艺术”

• 简单地说

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

• 网上是这样说的

  • AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML)
  • AJAX 是一种在 2005 年由 Google 推广开来的编程模式
  • AJAX 不是一种新的编程语言，而是一种使用现有标准的新方法
  • 通过 AJAX，你可以创建更好、更快以及更友好的 WEB 应用程序
  • AJAX 基于 JavaScript 和 HTTP 请求(HTTP requests)
  • 通过 HTTP 请求加载远程数据

• jQuery 底层对 AJAX 实现进行了封装，这使得我们在进行 AJAX 操作时，不必像原生 JS 中那么复杂

• $.get, $.post, $.ajax()

  • 返回其创建的 XMLHttpRequest 对象
  • 多数情况下我们不需要去操作返回的对象

2. 如何使用 AJAX 技术

• 首先，得有 Web 服务器，如，能够通过浏览器去执行 HTML 和 Python

• 注意：

  • 之前写的 HTML，直接在浏览器打开时，使用的是 file 协议
  • 而 AJAX 是基于 HTTP 请求的，所以需要 HTML 能够使用 HTTP 的协议打开
  • 如果能用 HTTP 协议打开 HTML，并且能够正常显示，那就表示 Web 服务器搭建成功

2.1 $.get() 方法

/* 发送 ajax 请求
1. url
2. 可选：发送 get 请求时携带的参数
3. 可选：回调函数，请求完之后做什么事
4. 可选：返回的数据类型 json
*/ 

$.get(url, {请求的参数}, function(data){}, "json");

2.2 $.post()

$.post(url, {请求的参数}, function(data){}, "json");

2.3 $.ajax()

$.ajax({
    url:"/cgi-bin/x.py",				// 当前请求的 url 地址
    type:"get",							// 当前请求的方式 get 或 post
    data:{id:100,username:"zhangsan"},	// 请求时发送的参数
    dataType:"json",					// 返回的数据类型
    success:function(data){				// ajax 请求成功后执行的代码
        console.log(data);
    },
    error:function(){					// ajax 执行失败后执行的代码
        alert("ajax 执行错误");
    },
    timeout:2000,						// 设置当前请求的超时时间毫秒，必须是异步请求才会生效
    async:true							// 是否异步，true 为异步，false 为同步
});

2.4 AJAX 的异步与同步

/* 设置 ajax 的全局配置
    async:false 设置当前请求为同步
*/
$.ajaxSetup({
    async:false
});

• AJAX 默认是异步请求

• async (默认: true)

  • 默认设置下，所有请求均为异步请求，所以一般不必写这句
  • 如果需要发送同步请求，需将此选项设置为 false

• 同步请求，发 AJAX 请求发出去后必须等待它的结果，返回后才能继续往下执行

• 一般情况下，都使用异步操作就行

• 除非有特殊情况，如，必须等 AJAX 的结果返回后才能做处理的，才用同步

3. 注意

1. AJAX 是无刷新请求服务器，所以我们在浏览器中感觉不到，也看不到 AJAX 的具体请求和执行情况，因此，我们需要借助浏览器的调试工具 F12 进行查看

2. AJAX 的请求是基于 HTTP 协议的，这就需要在打开带有 AJAX 的 HTML 时使用 HTTP 协议

3. 关于返回的数据类型

   • get(), post(), ajax() 都可以设置返回的数据类型 "json"
   • 如果要求返回 json 格式数据，那么就必须返回 json
   • 如果返回的格式与设置的不匹配
     • get 和 post 方法将拿不到 data 中返回的数据
     • AJAX 方法则会走 error 函数

4. 在 Python 中返回 json 格式数据

   • 引入 json 模块
   • json.dumps(数据)，使用 json_dumps 方法进行 json 格式的编码转换

5. AJAX 方法，会创建一个对象 XMLHttpRequest；在 AJAX 的方法中使用的 $(this) 代表 AJAX 的对象

4. 了解 JSON 格式数据

• JSON 是 JavaScript Object Notation 的首字母缩写
• 单词的意思是 JS 对象表示法
• 这里说的 JSON 指的是类似于 JS 对象的一种数据格式
• 目前这种数据格式比较流行，逐渐替换掉了传统的 XML 数据格式

4.1 JS 对象字面量

var tom = {
    name:'tom',
    age:18
};

4.2 JSON 格式的数据

{
    "name":'tom',
    "age":18
}

• 与 JSON 对象（JS对象）不同的是，JSON 数据格式的属性名称需要用双引号引起来，用单引号或者不用引号均会导致数据读取错误

• JSON 的另外一个数据格式是数组，和 JS 中的数组字面量相同

['tom', 18, 'programmer']