怎样理解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"& ...
随机推荐
- DBeaver 客户端中时间显示问题解决
最近工作使用了一段时间的macOS,换了新的数据库客户端 DBeaver,无意中发现客户端显示时间不正确.时间保存之后显示比实际时间多13个小时整.可以判断是时区没有配置正确.无意中发现是DBeave ...
- 用JS判断号码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 请求路径@PathVariable注释中有点.英文句号的问题(忽略英文句号后面的后缀)
前端页面请求地址 <video id=example-video width=960 height=540 class="video-js vjs-default-skin" ...
- Canal——写入到ES中数据错乱
问题描述 使用canal-adapter写入elasticSearch数据时,数据是写入了elasticSearch了,但出现了mysql表中的数据和elasticSearch中索引中的数据错乱的问题 ...
- onethink多图上传
模板处理, 可以参考 checkbox 的. 注:edit 方法的 基本一样,需要先把已有的数据展示出来,绑定双击事件,删除图片 需要先绑定给已经展示出来的图片, uploadPicture 的cal ...
- linux 文件赋权限
chown tomcat:tomcat /logs chmod 766 /logs
- Ubuntu 14.04安装vim8
本文介绍两种方法安装 VIM8.1 方法一:GitHub下载源码手动安装 1.查看系统是否有安装vim:如果有,先删除 dpkg -l | grep vim 2.从git上下载 git clone h ...
- 纯css实现表单输入验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于C++的智能指针
一句话概括:当类中有指针成员时,可以使用智能指针实现对象共享:智能指针通过引用计数实现,即对指向同一对象的指针计数:智能指针的使用可以方便/安全地控制对象的生命周期,对指针进行自动销毁. 当类中有指针 ...
- kibana配置文件说明书
#端口号 server.port: 5601 #kibana服务安装的地址 server.host: "192.168.122.21" #当使用代理时,这里可能对应的是加工后的ki ...