AJAX 是什么

AJAX ( Asynchronous JavaScript and XML,异步 JavaScript 和 XML,中文读音:”阿贾克斯 ”) 是一种 Web 交互的新方式

AJAX 实际上是几项技术按一定的方式组合在一起共同的协作中发挥各自的作用,包含了 JavaScript、XML、CSS、XSTL、DOM、HTML/XHTML 和 XHR 七种技术,所以 AJAX 就像是粘合剂把七种技术整合到一起,从而发挥各个技术的优势。

AJAX 的四大特点

  • 无需跳转页面即可改变页面内容

这是 AJAX 最大的特点,可以大大减少用户等待时间

  • 按需获取数据

每次 AJAX 请求只从服务器端获取需要的数据

  • 改善表单验证方式

不再需要打开新页面,也不再需要将整个页面数据提交

  • 异步与服务器进行交互

可以向服务器并行发送多个请求

AJAX 与传统 Web 的区别



  • AJAX 请求/响应不跳转页面,传统 Web 要跳转页面

  • AJAX 支持异步请求(并行),传统 Web 只能同步(串行)请求

  • AJAX 按需获取页面数据,传统 Web 获取整个页面

AJAX 开发五个步骤

<script>
//第一步:创建 XHR 对象
var xhr = new XMLHttpRequest(); //第二步:设置回调方法
xhr.onreadystatechange = callback; //第三步:建立与服务器的连接
xhr.open('GET',"/MySpringMVCApp_war_exploded/ajax",true); //第四步:向服务器发送AJAX请求
xhr.send(); //第五步:定义回调方法,接收 AJAX 请求返回的数据
function callback() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText; //获取返回的数据
}
}
</script>

JQuery AJAX

以上 JavaScript 原生语言开发 AJAX 太过繁琐,开发效率太低,而且还需要处理不同浏览器的兼容性问题。为此,JQuery 提供了 AJAX 的良好封装,大大简化直接使用 JavaScript 开发 AJAX 的困难,而且也不用考虑开发 AJAX 的浏览器的兼容性问题。

JQuery AJAX 封装六个方法对应六种方式使用 AJAX,如下:

  • ajax 方法:JQuery 低层封装方法,使用相对复杂,但功能强大,灵活性高

  • get 方法:支持 ajax 发送 get 请求

  • post 方法:支持 ajax 发送 post 请求

  • getJSON 方法:支持 ajax 发送 get 请求(返回数据为 JSON 格式)

  • load 方法:动态加载文件或代码并插入到 dom 中

  • getScript 方法:动态加载 js 文件并执行

getJSON 方法的使用
$.getJSON (
"ajax",
{
username:“参数1”,
content:“参数2”
},
function ( data ) {
//接受ajax返回的数据
}
);

以上是使用 getJSON 方法发送 ajax 请求代码,其中有三个参数,如下:

  • 参数1:表示发送 ajax 请求的服务器 url 地址

  • 参数2:表示发送 ajax 请求携带的参数数据

  • 参数3:表示匿名方法,用于接收 ajax 响应的数据

除 ajax 方法外,其他方法的使用与 getJSON 是完全相同的。

ajax 方法
$.ajax({
   
url: “http://www.hzhuti.com”,   // 请求的 url 地址
   
dataType: “json”,   // 返回格式为 json
   
async: true, // 请求是否异步(默认为异步)
   
data: { “id”: “value” },    // 请求携带的参数值
   
type: “GET”,   // 请求方式
   
success: function(data) {
        //处理接收的 ajax 数据
   
},
});

AJAX 原理与使用的更多相关文章

  1. AJAX原理总结

    AJAX全称 Asynchronous JavaScript and XML(异步的JavaScript 和XML) 同步和异步 异步传输是面向字符的传输,单位是字符 同步传输是面向比特,单位是帧,传 ...

  2. 什么是ajax,ajax原理是什么 ,优缺点是什么

    AJAX工作原理及其优缺点   1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页 ...

  3. ajax原理图解

    Ajax 原理图解 摘自: http://www.nowamagic.net/ajax/ajax_PicForAjaxPrinciple.php Ajax其实已经使用很久了,但一直也没有时间正经的找本 ...

  4. 浅析ajax原理与用法

    1 ajax原理 Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建 动态网页的技术,目的是显示动态局部刷新.通过XML ...

  5. Ajax原理一篇就够了

    Ajax原理一篇就够了 一.什么是Ajax Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简 ...

  6. 封装ajax原理

    封装ajax原理 首先处理 用户如果不传某些参数,设置默认值 type默认get 默认url为当前页 默认async方式请求 data数据默认为{} 处理用户传进来的参数对象 遍历,拼接成key=va ...

  7. 简述Ajax原理及实现步骤

    简述Ajax原理及实现步骤 1.Ajax简介 概念 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML). 现在允许浏览器与务器通信 ...

  8. 大话AJAX原理

    大话AJAX原理 一.什么是Ajax Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简单地说 ...

  9. Ajax -- 原理及简单示例

    1. 什么是Ajax •Ajax被认为是(AsynchronousJavaScript and XML的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 2. Ajax ...

  10. Ajax原理-重点

    Ajax原理 AJAX即“Asynchronous Javascript And XML”,是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用于创建快速动态网页的技术.它可以令开发者只向服务 ...

随机推荐

  1. springboot项目配置logback日志系统

    记录springboot项目配置logback日志文件管理: logback依赖jar包 SpringBoot项目配置logback理论上需要添加logback-classic依赖jar包: < ...

  2. fish shell 自动补全子命令

    之前在 「创建 fish shell 自动补全文件」 中介绍了如何创建 fish 的补全文件,实现对命令的友好补全提示.通过形如 complete -c <command> -a [&qu ...

  3. JAVAEE_Servlet_14_HttpServletRequest接口以及常用方法(一)

    HttpServletRequest接口 * javax.servlet.http.HttpServletRequest 接口 * 继承关系 HttpServletRequest---继承---> ...

  4. Nest 中处理 XML 类型的请求与响应

    公众号及小程序的微信接口是通过 xml 格式进行数据交换的. 比如接收普通消息的接口: 当普通微信用户向公众账号发消息时,微信服务器将 POST 消息的 XML 数据包到开发者填写的 URL 上. - ...

  5. Proxy.newProxyInstance源码探究

    JDK动态代理案例实现:实现 InvocationHandler 接口重写 invoke 方法,其中包含一个对象变量和提供一个包含对象的构造方法: public class MyInvocationH ...

  6. 假如kubernetes不支持docker了该怎么办

    假如kubernetes不支持docker了该怎么办 从官网安装文档可以看到kubernetes支持一下几种: https://kubernetes.io/docs/setup/production- ...

  7. 生活随笔:Furious 7:人生的路口,你先向西,但终点只有一个

       FOR PAUL It's never goodbye see you again         "他永远都是我们的家人."Dom起身准备离开 Letty问他,你打算不告而 ...

  8. 《机器学习Python实现_10_02_集成学习_boosting_adaboost分类器实现》

    一.简介 adaboost是一种boosting方法,它的要点包括如下两方面: 1.模型生成 每一个基分类器会基于上一轮分类器在训练集上的表现,对样本做权重调整,使得错分样本的权重增加,正确分类的样本 ...

  9. hdu 3721 树的最小直径

    题意:       给你一棵树,让你改变一条边,改变之后依然是一棵树,然后问你怎样改变才能让树的直径最短.这里的改变一条边指的是指把一条边长度不变,连在别的两个点上. 思路:       首先求出树的 ...

  10. POJ 2752 同一个串的前后串

    题解东北赛回来再补 #include<stdio.h> #include<string.h> int next[500000]; int ans[500000]; char s ...