AJAX: Asynchronous JavaScript and XML, 翻译过来就是: 异步的JavaScript与XML

这已经成为了一个通用名词, 字面意义已经消失了, 因为现在使用JavaScript异步请求返回的数据基本都是JSON, 而非 XML.

概括起来, AJAX指的就是: 通过 XMLHttpRequest对象发出HTTP请求, 得到服务器返回的数据后再进行处理的这样一种技术.

下面是一个简单的AJAX请求实例:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
// 通信成功时,状态值为4
if (xhr.readyState === 4){
if (xhr.status === 200){
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}
}; xhr.onerror = function (e) {
console.error(xhr.statusText);
}; xhr.open('GET', '/endpoint', true);
xhr.send(null);

总结起来, 使用AJAX有这样几个步骤:

1. 创建XMLHttpRequest实例对象

2. 发出HTTP请求

3. 接收服务器传回的数据

4. 更新网页数据

注意:

1. 使用AJAX最大的优点是它可以不用刷新整个页面, 提升性能的同时不会打断用户正在做的事情;

2. AJAX只能向同源网址发出HTTP请求, 跨域会报错.

怎样理解AJAX的更多相关文章

  1. 通过回调函数的理解来进一步理解ajax及其注意的用法

    一,再一次理解回调函数 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opaci ...

  2. JavaScript大杂烩12 - 理解Ajax

    AJAX缘由 再次谈起这个话题,我深深的记得就在前几年,AJAX被炒的如火如荼,就好像不懂AJAX,就不会Web开发一样.要理解AJAX为什么会出现,就要先了解Web开发面临的问题. 我们先来回忆一下 ...

  3. 深入理解ajax系列第八篇——表单提交

    前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...

  4. 深入理解ajax系列第八篇

    前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...

  5. 快速理解-Ajax

    AJAX即“Asynchronous JavaScript and XML”,意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己手动写AJAX,大多 ...

  6. 逐渐深入地理解Ajax

    Ajax的基本原理是:XMLHttpRequest对象(简称XHR对象),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.能够以异步方式从服务器获得更多信息.意味着用户不必刷新页面也能取得新 ...

  7. 理解Ajax

    1.优化原则 优化的目的是希望降低程序的整体开销.虽然在程序中有许多因素可以优化,但是通常人们会认为这个开销就是程序的执行时间.其实我们更应该把重点放在对程序整体开销最大的那部分.   2.一切都是权 ...

  8. 深入理解ajax系列第一篇——XHR对象

    × 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...

  9. JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法(让你真正理解ajax)

    ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载 ...

  10. 通过实例来理解ajax

    点击一个按钮,然后将信息显示到指定的div内. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...

随机推荐

  1. DBeaver 客户端中时间显示问题解决

    最近工作使用了一段时间的macOS,换了新的数据库客户端 DBeaver,无意中发现客户端显示时间不正确.时间保存之后显示比实际时间多13个小时整.可以判断是时区没有配置正确.无意中发现是DBeave ...

  2. 用JS判断号码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 请求路径@PathVariable注释中有点.英文句号的问题(忽略英文句号后面的后缀)

    前端页面请求地址 <video id=example-video width=960 height=540 class="video-js vjs-default-skin" ...

  4. Canal——写入到ES中数据错乱

    问题描述 使用canal-adapter写入elasticSearch数据时,数据是写入了elasticSearch了,但出现了mysql表中的数据和elasticSearch中索引中的数据错乱的问题 ...

  5. onethink多图上传

    模板处理, 可以参考 checkbox 的. 注:edit 方法的 基本一样,需要先把已有的数据展示出来,绑定双击事件,删除图片 需要先绑定给已经展示出来的图片, uploadPicture 的cal ...

  6. linux 文件赋权限

    chown tomcat:tomcat /logs chmod 766 /logs

  7. Ubuntu 14.04安装vim8

    本文介绍两种方法安装 VIM8.1 方法一:GitHub下载源码手动安装 1.查看系统是否有安装vim:如果有,先删除 dpkg -l | grep vim 2.从git上下载 git clone h ...

  8. 纯css实现表单输入验证

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 关于C++的智能指针

    一句话概括:当类中有指针成员时,可以使用智能指针实现对象共享:智能指针通过引用计数实现,即对指向同一对象的指针计数:智能指针的使用可以方便/安全地控制对象的生命周期,对指针进行自动销毁. 当类中有指针 ...

  10. kibana配置文件说明书

    #端口号 server.port: 5601 #kibana服务安装的地址 server.host: "192.168.122.21" #当使用代理时,这里可能对应的是加工后的ki ...