怎样理解AJAX

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

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

一,再一次理解回调函数 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opacity:0.1, //回调函数 copyOffset:function(index){ return{x:index,y:index}; } }; //将opts的内容合并到default中. var options = $.extend(defaults,opts); return this.eac…

JavaScript大杂烩12 - 理解Ajax

AJAX缘由再次谈起这个话题,我深深的记得就在前几年,AJAX被炒的如火如荼,就好像不懂AJAX,就不会Web开发一样.要理解AJAX为什么会出现,就要先了解Web开发面临的问题. 我们先来回忆一下Web页面的申请过程,这个咱们在第一篇中就介绍过了:Web页面开发就是在无连接和无状态的HTTP协议上管理页面的状态.每次申请页面的时候,服务器都会返回完整的HTML文本(当然还有其他的文本文件),浏览器就负责解析这个文本并在浏览器中显示. 在这个过程中,不管当前页面的内容是不是都变化了,服务器都会…

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

前面的话在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是有好处的.下面将详细介绍表单形式的交互建立表单表单处理是一个多线程.首先创建一个表单,以供用户输入详细的请求信息.接着,输入的数据被发送到网页服务器,在服务器里这些数据得到编译和错误检测.如果PHP代码标识出一个或多个需要重要输入的字段,则带有相关错误信息的表单会重新显示.当精确的输入信息满足代…

深入理解ajax系列第八篇

前面的话在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是有好处的.下面将详细介绍表单形式的交互建立表单表单处理是一个多线程.首先创建一个表单,以供用户输入详细的请求信息.接着,输入的数据被发送到网页服务器,在服务器里这些数据得到编译和错误检测.如果PHP代码标识出一个或多个需要重要输入的字段,则带有相关错误信息的表单会重新显示.当精确的输入信息满足代…

快速理解-Ajax

AJAX即“Asynchronous JavaScript and XML”,意思是异步JavaScript和XML,是指一种创建交互式网页的网页开发技术. 虽然现在很少有人去自己手动写AJAX,大多数都用封装好的AJAX,但我觉得初学者还是应该从最原始的AJAX开始学习,这样才能掌握AJAX的核心.现在各种博客上讲解AJAX的比较多,但大多数都是只讲AJAX的前端部分,或者是只讲解一部分功能,并没有完成的实例.在这篇随笔里我将通过实例来全面讲解AJAX的基础应用,其中也包括后台代码实现部分.…

逐渐深入地理解Ajax

Ajax的基本原理是:XMLHttpRequest对象(简称XHR对象),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.能够以异步方式从服务器获得更多信息.意味着用户不必刷新页面也能取得新数据,然后通过DOM将数据插入到页面中. XMLHttpRequest对象方法如下: about():停止当前的请求: open("method","URL",[asyncFlag]) : 等常见的方法: XHR的基本用法: 在使用XHR对象时,要调用的第一个方法是op…

理解Ajax

1.优化原则优化的目的是希望降低程序的整体开销.虽然在程序中有许多因素可以优化,但是通常人们会认为这个开销就是程序的执行时间.其实我们更应该把重点放在对程序整体开销最大的那部分. 2.一切都是权衡.当我们做性能优化时,不要浪费时间去尝试为那些不消耗大量时间的代码提速.评估优先,拒绝任何不能提高良好效益的优化. 3.浏览器通常在运行javascript上花费的时间很少,绝大部分时间消耗在DON上. 4.为质量编程.简洁.易读且条理分明的代码更容易于正确理解.维护和优化.避免耍小聪明,…

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

× 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的javascript和XML,这一技术能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验.虽然名字中包含XML,但ajax通信与数据格式无关.下面将详细介绍ajax的内容创建 ajax技术的核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性,其他浏览器提供商后来…

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

ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行更新. ajax效果的一个样例: 区域为空的时候,维护人情况: 选了一个区域后的情况:(选舒城县联带出来的维护人员小刘) 一.原生态的js实现 XMLHttpRequest 是 AJAX 的基础 XMLHttpRequest 对象全部现代浏览器均支持 X…

通过实例来理解ajax

点击一个按钮,然后将信息显示到指定的div内. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>FirstTest.html</title> <script language="javascript"> function onclickAjax(){ var xmlHttp;…

深入理解ajax系列第四篇——请求实例

前面的话在使用ajax的过程中,常用的请求方式是GET和POST两种.本文将以实例的形式来详细说明这两种请求方式 GET GET是最常见的请求类型,最常用于向服务器查询某些信息.必要时,可以将查询字符串参数追加到URL的末尾,以便将信息发送给服务器.对于XHR而言,位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行使用GET请求经常会发生的一个错误,就是查询字符串的格式有问题.查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码,然后才…

深入理解ajax系列第三篇——响应解码

前面的话我们接收到的响应主体类型可以是多种形式的,包括字符串String.ArrayBuffer对象.二进制Blob对象.JSON对象.javascirpt文件及表示XML文档的Document对象等.下面将针对不同的主体类型,进行相应的响应解码属性在介绍响应解码之前,要先了解XHR对象的属性.一般地,如果接受的数据是字符串,使用responseText即可,这也是最常用的用于接收数据的属性.但如果获取了其他类型的数据,使用responseText可能就不太合适了 [responseTex…

深入理解ajax系列第四篇——FormData

前面的话现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型.FormData为序列化表单以及创建与表单格式相同的数据提供了便利.本文将先介绍表单编码,然后过渡到表单序列化,最后引出FormData的核心概念表单编码当用户提交表单时,表单中的数据(每个表单元素的名字和值)编码到一个字符串中并随请求发送.默认情况下,HTML表单通过POST方法发送给服务器,而编码后的表单数据则用做请求主体对表单数据使用的编码方案相对简单:…

深入理解ajax系列第九篇——jQuery中的ajax

前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而不需要理会那么繁琐的XMLHTTPRequest对象.jQuery对ajax操作进行了封装,在jQuery中$.ajax()属性最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法.下面将详细介绍jQuery中的aj…

深入理解ajax

http://www.imooc.com/code/13468 基础练习 http://www.imooc.com/video/5644 !ajax! 常用 for in循环 for(var x in json) var json = JSON.parse(str); //把字符串解析成 JSON对象 var json = eval("(" + str + ")"); //把括号内字符当代码运行 var st…

理解AJAX的原理

1.原生ajax异步请求(ajax的原理) (异步请求:无跳转,无刷新....)通过XMLHttpRequst对象,向服务器发送请求.XMLHttpRequest对象具有一些属性和方法. 1.首先创建一个对象 var xhr=null 2.判断浏览器是否为IE 将xhr实例化 if(window.XMLHttpRequest){//标准浏览器 xhr=new XMLHttpRequest(); }else{//IE浏览器 xhr=new ActiveObject('Microsoft.XMLHt…

深入理解ajax系列第七篇——传递JSON

前面的话虽然ajax全称是asynchronous javascript and XML.但目前使用ajax技术时,传递JSON已经成为事实上的标准.因为相较于XML而言,JSON简单且方便.本文将上一篇中的实例进行改写,以JSON的方式来进行数据传递前端页面  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"…

深入理解ajax系列第二篇——请求方式

前面的话在上一篇中,概要地介绍了XHR对象的使用.本文将详细介绍使用XHR对象发送请求的两种方式——GET和POST.下面将以实例的形式来详细说明 GET GET是最常见的请求类型,最常用于向服务器查询某些信息,它适用于当URL完全指定请求资源,当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下 [数据发送] 使用GET方式发送请求时,数据被追加到open()方法中URL的末尾数据以问号开始,名和值之间用等号链接,名值对之间用和号(&)分隔.使用GET方式发送的数据常常被称为查询…

9.简单理解ajax

#### post 请求需要发送一个header setRequestHeader('Content-Type','application/x-www-form-urlencoded') post请求的参数必须写在 send 内部 #### 如果http的状态200(请求成功),xhr的状态是4(成功状态) #### 监听readystate status xhr.onreadystatechange=function(){ if(xhr.status==200 && xhr.readyS…

深入理解ajax系列第七篇

前面的话虽然ajax全称是asynchronous javascript and XML.但目前使用ajax技术时,传递JSON已经成为事实上的标准.因为相较于XML而言,JSON简单且方便.本文将上一篇中的实例进行改写,以JSON的方式来进行数据传递前端页面  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"…

深入理解ajax系列第二篇

前面的话在上一篇中,概要地介绍了XHR对象的使用.本文将详细介绍使用XHR对象发送请求的两种方式——GET和POST.下面将以实例的形式来详细说明 GET GET是最常见的请求类型,最常用于向服务器查询某些信息,它适用于当URL完全指定请求资源,当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下 [数据发送] 使用GET方式发送请求时,数据被追加到open()方法中URL的末尾数据以问号开始,名和值之间用等号链接,名值对之间用和号(&)分隔.使用GET方式发送的数据常常被称为查询…

深入理解ajax系列第三篇

前面的话我们接收到的响应主体类型可以是多种形式的,包括字符串String.ArrayBuffer对象.二进制Blob对象.JSON对象.javascirpt文件及表示XML文档的Document对象等.下面将针对不同的主体类型,进行相应的响应解码属性在介绍响应解码之前,要先了解XHR对象的属性.一般地,如果接受的数据是字符串,使用responseText即可,这也是最常用的用于接收数据的属性.但如果获取了其他类型的数据,使用responseText可能就不太合适了 [responseTex…

深入理解ajax系列第四篇

前面的话现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型.FormData为序列化表单以及创建与表单格式相同的数据提供了便利.本文将先介绍表单编码,然后过渡到表单序列化,最后引出FormData的核心概念表单编码当用户提交表单时,表单中的数据(每个表单元素的名字和值)编码到一个字符串中并随请求发送.默认情况下,HTML表单通过POST方法发送给服务器,而编码后的表单数据则用做请求主体对表单数据使用的编码方案相对简单:…

深入理解ajax系列第九篇

前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而不需要理会那么繁琐的XMLHTTPRequest对象.jQuery对ajax操作进行了封装,在jQuery中$.ajax()属性最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法.下面将详细介绍jQuery中的aj…

理解 ajax、fetch和axios

背景 ajax fetch.axios 优缺点 ajax基于jquery,引入时需要引入庞大的jquery库,不符合当下前端框架,于是fetch替代了ajax 由于fetch是比较底层,需要我们再次封装,比如data参数配置 // jquery ajax $.post(url, {name: 'test'}) // fetch fetch(url, { method: 'POST', body: Object.keys({name: 'test'}).map((key) => { return…

JAVA EE 项目常用知识之AJAX技术实现select下拉列表联动的两种用法（让你真正理解ajax）

ajax 下拉列表联动的用法. ajax的定义: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. ajax效果的一个例子: 区域为空的时候,维护人情况: 选了一个区域后的情况:(选舒城县联带出来的维护人员小刘) 一.原生态的js实现 XMLHttpRequest 是 AJAX 的基础 XMLHttpRequest 对象所有现代浏览器均支持 XMLHttp…

原生js封装ajax,深入理解$.ajax()

直接上代码 //封装的ajax函数 // 传一个对象,所有要用的参数都在对象中因为不写对象实参列表个数太多,所以像jq一样,调用ajax也是把对象当实际参数传进去 // type 请求方式默认get // url 请求地址这个必须要有,没有直接 return 后面都不需要判断 // async 是否异步如果不传默认是true true是异步,false是同步很鸡肋,既然用了ajax一般都是异步 //data : 对象的形式用对象包裹,jq中提供了表单序列化 $(表单).serial…

AJAX: Asynchronous JavaScript and XML, 翻译过来就是: 异步的JavaScript与XML 这已经成为了一个通用名词, 字面意义已经消失了, 因为现在使用JavaScript异步请求返回的数据基本都是JSON, 而非 XML. 概括起来, AJAX指的就是: 通过 XMLHttpRequest对象发出HTTP请求, 得到服务器返回的数据后再进行处理的这样一种技术. 下面是一个简单的AJAX请求实例: var xhr = new XMLHttpRequest(…

Ajax学习--理解 Ajax 及其工作原理

Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术:• HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段. • JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信. • DHTML 或 Dynamic HTML,用于动态更新表单.我们将使用 div.span 和其他动态 HTML 元素来标记 HTML. • 文档对象模型 DOM 用于(…

如何理解ajax的同步和异步？

对于如下一段代码: var dataJson = {"ABC":'testABC'}; $.ajax({ url: "/MonkeyServlet", async:false, data:dataJson, contentType: "application/json; charset=utf-8", …