怎样理解AJAX
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的更多相关文章
- 通过回调函数的理解来进一步理解ajax及其注意的用法
一,再一次理解回调函数 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opaci ...
- JavaScript大杂烩12 - 理解Ajax
AJAX缘由 再次谈起这个话题,我深深的记得就在前几年,AJAX被炒的如火如荼,就好像不懂AJAX,就不会Web开发一样.要理解AJAX为什么会出现,就要先了解Web开发面临的问题. 我们先来回忆一下 ...
- 深入理解ajax系列第八篇——表单提交
前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...
- 深入理解ajax系列第八篇
前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...
- 快速理解-Ajax
AJAX即“Asynchronous JavaScript and XML”,意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己手动写AJAX,大多 ...
- 逐渐深入地理解Ajax
Ajax的基本原理是:XMLHttpRequest对象(简称XHR对象),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.能够以异步方式从服务器获得更多信息.意味着用户不必刷新页面也能取得新 ...
- 理解Ajax
1.优化原则 优化的目的是希望降低程序的整体开销.虽然在程序中有许多因素可以优化,但是通常人们会认为这个开销就是程序的执行时间.其实我们更应该把重点放在对程序整体开销最大的那部分. 2.一切都是权 ...
- 深入理解ajax系列第一篇——XHR对象
× 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...
- JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法(让你真正理解ajax)
ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载 ...
- 通过实例来理解ajax
点击一个按钮,然后将信息显示到指定的div内. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...
随机推荐
- PG数据库创建并执行存储过程批量插入数据
记录一下PG数据库创建并执行存储过程批量插入数据的SQL: create or replace function addId() returns boolean AS $BODY$ declare i ...
- Razor字符串处理
需要注意的是低版本是不支持C# 6语法中的string interpolation的 <label> @if (!string.IsNullOrEmpty(Model.BudgetValu ...
- Android通过adb shell am broadcast发送广播 参数说明
通过命令行执行adb shell am broadcast发送广播通知. adb shell am broadcast 后面的参数有: <INTENT> specifications in ...
- kotlin数据解构
fun main(arg: Array<String>) { val person = person("tom") var (name) = person//解构 pr ...
- C之指针的加法
#include<stdio.h> #include<stdlib.h> main() { //char arr [] = {'H','e','l','l','o'}; int ...
- c++ map multimap操作
#include <iostream>#include <map>#include <string> using namespace std; int main() ...
- 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_07-新增页面-前端-页面完善
在新增页面加返回按钮 <el-button type="primary" @click="go_back" >返回</el-button> ...
- vim基础学习1---简单命令
1:vim abc:如果有abc文件,则打开,否则创建之后打开 2:输入"i",才可以输入东西 3:按Esc,它是底行模式,再敲":wq 回车" 保存退出. 4 ...
- 详解Pytorch中的网络构造,模型save和load,.pth权重文件解析
转载:https://zhuanlan.zhihu.com/p/53927068 https://blog.csdn.net/wangdongwei0/article/details/88956527 ...
- sklearn常见分类器(二分类模板)
# -*- coding: utf-8 -*- import pandas as pd import matplotlib matplotlib.rcParams['font.sans-serif'] ...