[Web 前端] 030 ajax 是什么
时间:2019-10-23
本文章向大家介绍[Web 前端] 030 ajax 是什么,主要包括[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. 注意
AJAX 是无刷新请求服务器,所以我们在浏览器中感觉不到,也看不到 AJAX 的具体请求和执行情况,因此,我们需要借助浏览器的调试工具 F12 进行查看
AJAX 的请求是基于 HTTP 协议的,这就需要在打开带有 AJAX 的 HTML 时使用 HTTP 协议
- 关于返回的数据类型
- get(), post(), ajax() 都可以设置返回的数据类型 "json"
- 如果要求返回 json 格式数据,那么就必须返回 json
- 如果返回的格式与设置的不匹配
- get 和 post 方法将拿不到 data 中返回的数据
- AJAX 方法则会走 error 函数
- 在 Python 中返回 json 格式数据
- 引入 json 模块
- json.dumps(数据),使用 json_dumps 方法进行 json 格式的编码转换
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']
原文地址:https://www.cnblogs.com/yorkyu/p/11729415.html
- 不用@微信官方了,Python20行自动戴帽!
- BAT人工智能生态时局图:全面战争爆发前夜
- AI博弈论:DeepMind让智能体在非对称博弈中找纳什均衡
- 斯坦福吴恩达团队公布最大医学影像数据集
- Rokid祝明铭:大腿我们不抱,人机交互产品形态未定 | 变局者
- 腾讯AI让二子,柯洁还是输了
- AI创业者的“英雄联盟”,腾讯AI加速器二期项目招募开启
- PyTorch发布一周年:盘点社区和工程大事件,后来者居上态势已显?
- 2018年AI如何发展?普华永道做出了8点预测 | 报告下载
- 不正之风!机器学习论文里都有哪四大投机取巧的写作手法?
- 前端写一个月的原生 Android 是怎样一种体验?
- 给人挖矿还不自知 电脑已变黑客肉鸡
- 反序列化漏洞屡被黑客利用,危害巨大,代码怎样写才安全?
- Mifa 主题微信编辑器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法