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. PG数据库创建并执行存储过程批量插入数据

    记录一下PG数据库创建并执行存储过程批量插入数据的SQL: create or replace function addId() returns boolean AS $BODY$ declare i ...

  2. Razor字符串处理

    需要注意的是低版本是不支持C# 6语法中的string interpolation的 <label> @if (!string.IsNullOrEmpty(Model.BudgetValu ...

  3. Android通过adb shell am broadcast发送广播 参数说明

    通过命令行执行adb shell am broadcast发送广播通知. adb shell am broadcast 后面的参数有: <INTENT> specifications in ...

  4. kotlin数据解构

    fun main(arg: Array<String>) { val person = person("tom") var (name) = person//解构 pr ...

  5. C之指针的加法

    #include<stdio.h> #include<stdlib.h> main() { //char arr [] = {'H','e','l','l','o'}; int ...

  6. c++ map multimap操作

    #include <iostream>#include <map>#include <string> using namespace std; int main() ...

  7. 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_07-新增页面-前端-页面完善

    在新增页面加返回按钮 <el-button type="primary" @click="go_back" >返回</el-button> ...

  8. vim基础学习1---简单命令

    1:vim abc:如果有abc文件,则打开,否则创建之后打开 2:输入"i",才可以输入东西 3:按Esc,它是底行模式,再敲":wq 回车" 保存退出. 4 ...

  9. 详解Pytorch中的网络构造,模型save和load,.pth权重文件解析

    转载:https://zhuanlan.zhihu.com/p/53927068 https://blog.csdn.net/wangdongwei0/article/details/88956527 ...

  10. sklearn常见分类器(二分类模板)

    # -*- coding: utf-8 -*- import pandas as pd import matplotlib matplotlib.rcParams['font.sans-serif'] ...