当前位置：搜档网 › AJAX学习笔记

AJAX学习笔记

1、Ajax是什么，web出现的革新？

1.1Ajax未出现之前，Html显示的都是在服务器端预处理好的数据；如果你只要刷新页面的局部信息，但实际上你要刷新的是整个页面，全局刷新，同步处理数据，亦即重新加载整个页面。----“工作--等待”模式

1.2Ajax出现之后，保持用户体验的页面不变，只是刷新局部，实现异步处理数据。

2、Ajax核心组成

Ajax=XmlHttpRequest（特殊的JavaScript对象）+JavaScript事件+动态Html （DHtml）

3、Ajax的使用

3.1实例化XmlHttpRequest（XHR）

3.2发送请求

3.2.1服务器资源的url

3.2.2HTTP的请求类型，主要为get和post

3.2.3服务器资源所需要的参数

3.2.4一个js函数，对服务器返回的结果进行解析和处理

3.3处理响应

3.3.1readyState（0~4）

3.3.2status（200~299）

4、Ajax从服务器端的返回

4.1Html

4.2JavaScript

4.3Json

4.4XML（结合XPATH查询和XSLT转换）

5、JavaScript里面的Prototype库

5.1获取DOM元素的引用--$()函数

$(“someElementId”)=document.getElementById(“someElementId”)

$()函数既可以传入一个id字符串，也可以传入一个DOM引用

5.2读取表单控件的值--$F()函数

Value=$F(“someElementId”)，传入一个id字符串

5.3对数组的扩展

5.3.1$A()函数，可以把其他构造转换成Array类的实例，特别是能够把XML

文档的NodeList转换成数组

5.3.2Enumerable类，旗下有each(函数引用作为参数)方法，作为函数引用

的参数必须要实现function iteratorFunction(element,index);接口。5.4Hash类

Object类可以被视为“关联数组”（键/值、属性/值）

$H()函数可以根据任意一个js对象的属性和值来创建一个Hash类的实例toQueryString()方法，对hash所包含的名值对进行格式化，形成对应的HTTP 查询字符串，通常与$H()结合使用

代码片段1

var o=new Object();

o.a=1;

o.b=2;

o.c=3;

Document.write($H(o).toQueryString());

结果a=1&b=2&c=3

对于一些被编码的字符，执行toQueryString()方法后会自动替换成对应的编码（空格、+、&）

5.5给函数绑定上下文对象

函数名.bind(实例化对象)

类似的还有bindAsEventListener()用于事件的绑定回调

5.6用Prototype创建类

代码片段1

Something=Class.create();

Something.prototype.initialize=function(p1,p2,p3){

/*constructor*/

};

Something。Prototype.othermethod=function(){

/*other method*/

}

5.7用prototype合并对象和扩展类

Object.extend(object1,object2);把object2中的复制一份到object1中，如果有相同属性，则object2优先，最后返回一个object1对象

5.8如何标记某个元素是否改变，可为元素添加级联（层叠）样式表和使用

prototype的$$()函数根据级联样式表名称获取元素数组。

代码片段1--为元素添加级联（层叠）样式表

Event.element(event).addClassName(“changeClassName”);

代码片段2--$$()函数的使用

Var changeElements=$$(“.changeClassName”);

If(changeElements.length>0){

Var parameters={};

changeElements.each(

Function(element){

Parameters[https://www.sodocs.net/doc/f2483113.html,]=element.value;

element.removeClassName(“changeClassName”);

}

);

New Ajax.Request(

URL;

{

Method:post,

Parameters:parameters,

onSuccess:function(xhr){

$(“info”).innerHTML=xhr.responseTerxt;

}

);

}

Event.stop(event);

6、Ajax的开源工具集

Dojo、prototype、jQuery、DWR-RPC（远程过程调用）

PHP+AJAX教程(5)-AJAX MySQL数据库实例

PHP+AJAX教程(5):AJAX MySQL数据库实例 AJAX 可用来与数据库进行交互式通信。 AJAX 数据库实例在下面的AJAX 实例中，我们将演示网页如何使用AJAX 技术从MySQL 数据库中读取信息。在下拉列表中选择一个名字（测试说明：该实例功能未实现）在此列出用户信息。此列由四个元素组成： MySQL 数据库简单的HTML 表单 JavaScript PHP 页面数据库将在本例中使用的数据库看起来类似这样： id FirstName LastName Age Hometown Job 1 Peter Griffin 41 Quahog Brewery 2 Lois Griffin 40 Newport Piano Teacher 3 Joseph Swanson 39 Quahog Police Officer 4 Glenn Quagmire 41

Quahog Pilot HTML 表单上面的例子包含了一个简单的HTML 表单，以及指向JavaScript 的链接： <html><head><script src="selectuser.js"></script></head><body><form> Select a User:<select name="users" onchange="showUser(this.value)"><option value="1">Peter Griffin</option><option value="2">Lois Griffin</option><option value="3">Glenn Quagmire</option><option value="4">Joseph Swanson</option></select></form><p><div id="txtHint"><b>User info will be listed here.</b></div></p></body></html> 例子解释- HTML 表单正如您看到的，它仅仅是一个简单的HTML 表单，其中带有名为"users" 的下拉列表，okooo澳客网这个列表包含了姓名，以及与数据库的"id" 对应的选项值。表单下面的段落包含了名为"txtHint" 的div。这个div 用作从web 服务器检索到的信息的占位符。当用户选择数据时，执行名为"showUser()" 的函数。该函数的执行由"onchange" 事件触发。换句话说：每当用户改变下拉列表中的值，就会调用showUser() 函数。 JavaScript 这是存储在"selectuser.js" 文件中的JavaScript 代码： var xmlHttpfunction showUser(str){ xmlHttp=GetXmlHttpObject()if (xmlHttp==null){alert ("Browser does not support HTTP Request")return}var url="getuser.php"url=url+"?q="+strurl=url+"&sid="+Mat h.random()xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)xmlHttp.send(null)}function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ document.getElementById("txtHint").i nnerHTML=xmlHttp.responseText } }function GetXmlHttpObject(){var xmlHttp=null;try{// Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}catch (e){//Internet Explorertry { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }}return xmlHttp;} 例子解释： stateChanged() 和GetXmlHttpObject 函数与PHP AJAX 请求那一节中的相同，您可以参阅其中的相关解释。 showUser() 函数假如下拉列表中的项目被选择，函数执行：调用GetXmlHttpObject 函数来创建XMLHTTP 对象定义发送到服务器的URL（文件名）向URL 添加带有下拉列表内容的参数(q) 添加一个随机数，以防服务器使用缓存的文件当触发事件时调用stateChanged 通过给定的URL 打开XMLHTTP 对象向服务器发送HTTP

easyUI教程

jQuery EasyUI 简介 jQuery EasyUI 是一个基于jQuery 的框架，集成了各种用户界面插件。什么是JQuery EasyUI jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。 ?easyui 是一个基于jQuery 的框架，集成了各种用户界面插件。 ?easyui 提供建立现代化的具有交互性的javascript 应用的必要的功能。 ?使用easyui，您不需要写太多javascript 代码，一般情况下您只需要使用一些html 标记来定义用户界面。 ?HTML 网页的完整框架。 ?easyui 节省了开发产品的时间和规模。 ?easyui 非常简单，但是功能非常强大。

JQuery EasyUI 下载您可以从https://www.sodocs.net/doc/f2483113.html,/download/index.php上下载您需要的jQuery EasyUI 版本。 JQuery EasyUI-创建 CRUD 应用数据收集并妥善管理数据是网络应用共同的必要。CRUD 允许我们生成页面列表，并编辑数据库记录。本教程将向你演示如何使用jQuery EasyUI 框架实现一个CRUD DataGrid。我们将使用下面的插件： ?datagrid：向用户展示列表数据。 ?dialog：创建或编辑一条单一的用户信息。 ?form：用于提交表单数据。 ?messager：显示一些操作信息。步骤1：准备数据库我们将使用MySql 数据库来存储用户信息。创建数据库和'tbl_user' 表。

步骤2：创建DataGrid 来显示用户信息创建没有javascript 代码的DataGrid。我们不需要写任何的javascript 代码，就能向用户显示列表，如下图所示：

《移动Web开发技术基础》教学大纲2015

《移动Web开发技术基础》教学大纲一、课程名称移动Web开发技术基础 Foundation of Mobile Web Programming 二、学时与学分 80学时（理论48、实验32）、4学分三、适用专业非计算机专业本科生四、参考教材 1.《JavaScript前端开发实用技术教程》，岳学军，人民邮电出版社，2014. 9 2.（HTML5程序设计》,Peter Lubbers等，人民邮电出版社，2012.5 3.《HTML5与CSS3权威指南（第2版）》,陆凌牛，机械工业出版社，2013.3 五、课程的内容和目的本课程作为非计算机专业本科通识课程，是一门理论和实践紧密结合的实用课程，内容包括讣算机基础部分和程序设计部分。汁算机基础部分涵盖计算机软硬件组成、数制表示、操作系统、多媒体原理和网络基础知识。程序设计部分为Web开发技术：HTML技术、CSS技术、Javascript语言、AJAX技术、HTML5新技术及HTML5 API。使学生掌握网站询端开发技术和开发移动端单页Web应用的基本原则、方法和步骤，从而使学生具有扎实的Web开发理论基础和较强的实践动手开发能力。本课程的主要目的是使学生了解计算机基础知识、Web开发技术, 具

备HTML5语言的编程能力。基木要求 1.了解计算机基础知识。 2.了解操作系统的作用及分类 3.了解多媒体基础知识 4.了解网络基础知识，掌握网络基本应用及网络信息的获取方法 5.理解Web工作原理，了解Web技术基础。 6.熟练掌握超文本标记语言HTML文档的结构、常用文档元素的含义和基本使用方法。 7.理解样式表语言CSS的基本概念和作用，掌握CSS的基本语法和使用方法。 8.掌握脚本语言JavaScript的基本概念和语法，掌握JavaScript对常用 HTML文档元素的操作方法；了解文档对象模型DOM的基本概念和作用。 9.了解 HTML3 新标签及 HTML5 API 10.了解主要动态网页技术的基本概念。七、教学大纲第1章计算机基础知识授课内容： 1.计算机的发展及应用 2.计算机中的信息表示（二进制、信息单位） 3.数据在计算机中的表示 4.计算机硬件系统 5.计算机软件系统 6.操作系统功能及分类第2章多媒体技术基础授课内容：

html5实例教程网盘下载

html5实例教程网盘下载学习HTML、CSS基础知识，实现PC端静态页面制作（例如京东商城），响应式网页布局的制作（微软中国官网）、及WebApp页面布局（淘宝、美团等）。 html5前端人才已成为IT职场的紧缺型人才，如何自学html5？如何短时间内迅速提升html5开发能力？千锋教育html5实例教程网盘下载（https://www.sodocs.net/doc/f2483113.html,/video/html5_download.html），助力大家成为企业不可多得的贤才。实现这些需要的知识有 1、学习HTML基本语法：双标签、单标签语法结构。 2、常用标签：标题标签、段落标签、布局标签、表格、列表、标签标签。 3、学习CSS基本语法：选择器声明。 4、学习CSS的三种样式表：内联、内部、外部 5、学习CSS的各种常用选择器 6、学习CSS的选择器、样式表的优先级和权重问题。 7、学习CSS的核心属性及属性值 8、学习CSS的元素类型的转换

9、学习CSS的定位锚地的应用 10、学习CSS中的图片整合技术的应用 11、学习CSS中常见的浏览器的兼容及解决方法 12、学习HTML5新增元素及属性 13、学习CSS3新增选择器的应用 14、学习CSS3的2D、3D、关键帧动画的相关应用 15、学习CSS3中弹性盒的应用 16、学习CSS3中媒体查询响应式的设计应用学习JavaScript和jQuery及掌握一门后台程序语言的简单基础和一个数据库，实现PC端项目交互开发（做一个电商类型的网站开发）需要的知识有 1、学习JavaScript的基本语法 2、学习JavaScript的循环语句 3、学习JavaScript的函数与数组 4、学习JavaScript的String和Data 5、学习JavaScript的BOM与DOM 6、学习JavaScript的相关事件 7、学习JavaScript的拖拽效果 8、学习JavaScript的cookie存储 9、学习JavaScript的正则表达式 10、学习JavaScript的Ajax的应用 11、学习JavaScript的面相对象基础

jQuery调用AJAX异步操作超清晰教程

JQUERY AJAX异步操作详细说明 AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和XML）。它并非一种新的技术，而是以下几种原有技术的结合体。 1)使用CSS和XHTML来表示。 2)使用DOM模型来交互和动态显示。 3)使用XMLHttpRequest来和服务器进行异步通信。 4)使用javascript来绑定和调用。通过AJAX异步技术，可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型： 1)不需要用户等待服务端响应。在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。界面不会出现白板，在得到服务器响应之前还可以友好的给出一个加载提示。 2)不需要重新加载整个页面。为XMLHttpRequest注册一个回调函数，待服务器响应到达时，触发回调函数，并且传递所需的少量数据。“按需取数据”也降低了服务器的压力。 3)不需要使用隐藏或内嵌的框架。在XHR对象之前，模拟Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架(标签)。下面介绍下AJAX中的重要对象：XMLHttpRequest。 XMLHttpRequest对象(XHR) XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。 XMLHttpRequest对象首次以ActiveX对象形式在微软Internet Explorer(IE) 5中以引入。其他浏览器制造商在认识到这一对象重要性后也纷纷实现了XMLHttpRequest对象，但是以一个本地JavaScript对象而不是作为一个ActiveX 对象实现。而如今，由于安全性、标准等问题，微软已经在其IE 7中把XMLHttpRequest实现为一个本地JavaScript对象。 API描述客服端请求 open(method,url,a sync, bstrUser, bstrPassword)规定请求的类型、URL 以及是否异步处理请求。 1)method：请求的类型，例如：POST、GET、PUT及PROPFIND。大小写不敏感。 2)url：请求的URL地址，可以为绝对地址也可以为相对地址。 3)async[可选]：true（默认，异步）或 false（同步）。注释：当您使用async=false 时,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。此时，不需要编写onreadystatechange回调函数，把代码放到send() 语句后面即可。</p><h2>千锋html5基础入门教程内容</h2><p>千锋html5基础入门教程内容千锋html5基础入门教程内容有哪些？零基础能不能学会这门课程？互联网的高速发展带动了软件行业，更多年轻人会选择学习软件行业作为未来的职业，html5随着近两年的不断火热，受到了更多年轻人的青睐，那么学习的内容也更受到大家的关注，那么给大家介绍一下千锋html5入门教程内容。千锋html5培训课程分采用进阶式学习，阶段性检测学员掌握学员学习情况。千锋的html5学科的课程体系能够适应市场需求、紧跟时代技术，完全满足市场对html5工程师的要求，大大提升了学员的市场竞争力。学习内容包括7大学习阶段：阶段一：前端页面重构(4周）内容包含了：（PC端网站布局项目、HTML5+CSS3基础项目、WebApp 页面布局项目）阶段二：JavaScript高级程序设计（5周）</p><p>内容包含：1）原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目）阶段三：PC端全栈项目开发（3周）内容包含：（jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目）阶段四：移动端项目开发(6周) 内容包含：（Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目）阶段五：混合（Hybrid,ReactNative）开发（1周）内容包含：（微信小程序开发、React Native、各类混合应用开发）</p><h2>JQuery插件教程</h2><p>JQuery插件教程.txt我很想知道，多少人分开了，还是深爱着。ゝ自己哭自己笑自己看着自己闹。你用隐身来躲避我丶我用隐身来成全你！待到一日权在手，杀尽天下负我狗。jQuery 插件开发全解析 jQuery插件的开发包括两种：一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。 1、类级别的插件开发类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展： 1.1 添加一个新的全局函数添加一个全局函数，我们只需如下定义： jQuery.foo = function() { alert('This is a test. This is only a test.'); }; 调用的时候可以这样写：jQuery.foo(); 或$.foo(); 1.2 增加多个全局函数添加多个全局函数，可采用如下定义： jQuery.foo = function() { alert('This is a test. This is only a test.'); }; jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".'); }; 调用时和一个函数的一样的:jQuery.foo(); jQuery.bar(); 或者$.foo(); $.bar('bar'); 1.3 使用jQuery.extend(object); jQuery.extend({ foo: function() { alert('This is a test. This is only a test.'); }, bar: function(param) { alert('This function takes a parameter, which is "' + param +'".'); } }); 调用时和一个函数的一样的:jQuery.foo(); jQuery.bar(); 或者$.foo(); $.bar('bar'); 1.4 使用命名空间虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名，通过</p><h2>https://www.sodocs.net/doc/f2483113.html,和AJAX简洁教程</h2><p>介绍尽管AJAX是种客户端技术，但实际上的开发过程，它经常要调用一个服务器端的过程。通常，网站上的数据是存放在一个关系型数据库中，为了让AJAX更有用处，处理服务器端数据需要一种简单可靠的方法。幸运的是，https://www.sodocs.net/doc/f2483113.html, AJAX提供了一种有效的基础架构来做这件事情，浏览器和服务器在Internet上可以进行AJAX通信。自然而然，Web Service在数据传输和客户端/服务器之间的一般通信方面可以扮演一个重要角色。本文就演示了如果通过https://www.sodocs.net/doc/f2483113.html, AJAX调用https://www.sodocs.net/doc/f2483113.html, web services。软件需求本文所有的范例都是使用https://www.sodocs.net/doc/f2483113.html, AJAX RC版，而且，要在SQL Server 2005 (Express版即可)上有一个Northwind数据库。范例使用Visual Studio 2005作为开发环境。范例场景范例开发了一个Web页面，用于输入Northwind数据库职员表中的职员数据。页面通过https://www.sodocs.net/doc/f2483113.html, AJAX功能，调用一个Web Service来完成职员表中的数据增、删、改、查。创建一个Web Service 作为开始，使用Visual Studio 2005创建一个新的Web站点，注意把https://www.sodocs.net/doc/f2483113.html, AJAX项目模板添加到新站点对话框，这个对话框包括一个"https://www.sodocs.net/doc/f2483113.html, AJAX Enabled Web Site" 模板。图1：新站点创建模板使用"https://www.sodocs.net/doc/f2483113.html, AJAX Enabled Web Site" 模板创建的新站点和用普通方法创建的站点区别如下：·它的Web.config自动包括许多https://www.sodocs.net/doc/f2483113.html, AJAX专用的配置信息。</p><h2>jQuery的起点教程(PDF版)</h2><p>以下部分为原文翻译: jQuery入门指南教程这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。内容提要</p><p>Hello jQuery 在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:</p><p>$(document).ready(function(){ //do stuff when DOM is ready }); 放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert. $(document).ready(function(){ $("a").click(function(){ alert("Hello world!"); }); }); 这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。 (译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。) 让我们看一下这些修改是什么含义。$("a")是一个jQuery选择器(selector),在这里，它选择所有的a标签（译者Keel注：即<a></a>），$号是jQuery“类”(jQuery"class")的一个别称，因此$()构造了一个新的jQuery对象(jQuery object)。函数click()是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法. 这里有一个拟行相似功能的代码: <a href="#"onclick="alert('Hello world')">Link</a> 不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样. 下面我们会更多地了解到选择器与事件. 本章的相关链接:</p><h2>2018年最新全套Web前端开发学习教程</h2><p>2018年最新全套Web前端开发学习教程前端很火，学习前端的人也多【前端开发月薪多少？>>】。泛艺学苑在这里为大家制作这份2018年最新全套Web前端开发学习教程，让正在学习前端的小伙伴们有一份系统专业的学习资源和学习指导。【前端开发教程下载>>】一、学习Web前端开发线路图二、学习Web前端教程篇第一阶段：基础教程第一章HTML基础</p><p>第一节了解HTML及W3C标准第二节HTML标签第三节HTML框架第二章CSS基础第一节CSS基础语法和选择器第二节CSS盒模型第三节CSS常用属性第四节CSS定位第三章JS基础第一节JS简介第二节JS变量和数据类型第三节JS函数及流程控制第四节JS常用对象第四章jQuery的使用第一节jQuery的基本使用第二节jQuery选择器第三节jQuery效果第四节jQuery操作DOM 第五节jQuery页面效果插件</p><p>第六节jQuery动画插件第二阶段：进阶教程第五章HTML5 第一节HTML5概述第二节新增元素及属性1 第三节新增元素及属性2 第四节Canvas、SVG 第五节Web存储第六节应用缓存及web works 第七节服务器推送事件第六章CSS3 第一节CSS3基础第二节CSS3盒模型第三节CSS3布局第四节CSS3动画第五节Web文字及兼容性第七章bootstrap 第一节响应式概念第二节C栅格系统</p><p>第三节Bootstrap常用模板第四节Less和SASS 第八章移动Web开发第一节视口和CSS单位第二节流式布局第三节弹性盒模型第四节移动终端事件处理第五节常见的移动端布局第六节跨终端Web适配方案第七节移动Web开发综合案例第九章JS进阶第一节DOM模型第二节JS浏览器对象第三节JS面向对象第四节常用设计模式第三阶段拔高教程第十章前端自动化第一节NPM包管工具第二节版本管理工具</p><h2>jquery ajax教程</h2><p>jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。这个方法默认使用GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的HTML 文档，DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。这个方法可以很方便的动态加载一些HTML文件，例如表单。示例代码： $(".ajax.load").load("https://www.sodocs.net/doc/f2483113.html,/yeer/archive/2009/06/10/ 1500682.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求参数：</p><h2>JAVA AJAX教程第一章-初始AJAX</h2><p>既然是认识AJAX，理论和实践相结合，这样让自己学的更快，理解更深入，我分一下几点： 1、认识传统的同步交互方式和AJAX解决方案 2、AJAX使用到的技术 3、实例体验AJAX 一、同步交互方式和AJAX解决方案传统的WEB应用是同步交互的方式，这种同步交互方式的处理过程如下图什么是同步交互方式：首先，用户向HTTP服务器提交一个处理请求。接着，服务器端接收到请求后，按照预先编写好的程序中的业务逻辑进行处理，比如和数据库服务器进行数据信息交换。最后，服务器对请求进行响应，将结果返回给客户端，返回一个HTML 在浏览器中显示，通常会有CSS样式丰富页面的显示效果。同步交互的不足之处，会给用户一种不连贯的体验，当服务器处理请求时，用户只能等待状态，页面中的显示内容只能是空白。 AJAX解决方案 AJAX采用的异步交互的处理方式，很好的解决不连贯的用户体验，处理过程如图：</p><p>二、AJAX使用的技术 1、JavaScript脚本 2、XHTML和CSS 3、DOM 4、XML和XSTL 5、XMLHTTPRequest 三、实例体验AJAX 首先，布置好开发环境： JDK 1.4以上，我使用1.6 Eclipse 3.1以上，我使用3.4 Tomcat 5.0以上，我使用6.0 MySql 4以上，我使用5.0 如果你没有十足的把握请搭建和我一样的环境。实例1：我先做一个传统同步交互的实例，然后同AJAX的异步交互进行对比。这里还要介绍下J2EE中经常提到的MVC模式：</p><p>MVC模式，即模型—视图—控制器模式，核心是代码分为相对独立的3个组成部分，其功能如下：模型（Model），业务逻辑层。实现业务逻辑、状态管理的功能。视图（View），表示层。即实现与用户交互的界面，通常实现数据的输入和输出功能。控制器（Control），控制层。起到控制整个业务流程的作用，实现View和Model 部分的协同工作。在Model2中，采用Servlet作为控制器，负责接收客户端Web浏览器发送来的所有请求，并依据处理的不同结果，转发到对应的JSP页面实现在浏览器客户端的显示。 Model2模式工作如下：好现在就开始写代码来实现上面的原理了：要有三个东西，如下：一个页面，也就是View，先制定好是login.jsp，用来登陆的；一个Servlet，也就是Model，用来作为控制层。好了，奇怪为什么没有Control，也就是没有控制器呢？后面就知道咯！下面是Eclipse中的层次结果：</p><h2>非常好的gwt-ext培训教程</h2><p>Gwt-Ext 的概述 GWT-Ext 是基于Google Web Toolkit（GWT）和ExtJs 的功能强大的网页开发控件库。它非常适用于进行纯Java 语言的富Internet 应用的快速开发。本系列文章将详细讲解GWT-Ext 的基本结构和功能特点，并通过代码示例来演示该技术的具体实现。本文是该系列的第一部分，将带领您快速入门GWT-Ext，并演示如何快速搭建GWT-Ext 的开发环境。概述 GWT-Ext 是基于Google Web Toolkit（GWT）和ExtJs 的功能强大的网页开发控件库。它扩展了GWT，在ExtJs 的基础上实现了有排序功能的表格（Grid）、分页、过滤，支持有拖拽功能的树，高度可定制的组合下拉框（Combobox）、目录、对话框、表单（Form）以及功能丰富、强大且易用的API。GWT-Ext 拥有GNU Lesser General Public Licence (LGPL)（请参阅参考资料），V3.0 的许可证。因此它是一个非常灵活，允许在开源和商业中应用的控件库。 GWT 的介绍（请参阅参考资料）已经非常丰富，我们这个系列主要关注在GWT-Ext 的介绍和应用上。GWT-Ext 是在GWT 和ExtJs 的基础上对表现层的进一步封装。我们可以理解GWT 提供了Ajax 的一套基础框架，而ExtJs 提供了以JavaScript 和CSS 样式表为基础的非常丰富的表现层接口。那么GWT-Ext 就是在GWT 的基础上，将ExtJs 的JavaScript 接口映射或者封装为Java 的接口。在Java 的环境下开发和调试开发表现层，可以大大提高开发的速度。回页首 GWT-Ext 开发环境搭建在这个系列中，将通过示例的方式，一步步地介绍如何搭建一个GWT-Ext 的开发环境。本章将通过图解与代码结合的方式搭建演示平台框架，并且演示如何部署这个平台到Tomcat 容器中。下载开发环境我们将使用Eclipse 和插件Cypal Studio 来搭建控件演示平台。Cypal Stutio 是一个GWT 成熟的开发工具。它能非常方便地帮助我们搭建GWT 的开发以及调试环境，并且能够实现编译和打包的工作，省去了开发GWT 过程中很多繁琐的过程。需要下载的产品和技术请参阅参考资源中的“获得产品和技术”部分。安装Cypal Studio 插件解压Eclipse 到本地硬盘，同时解压cypal.studio.for.gwt-1.0.zip 到Eclipse 的plugins 目录下。然后解压下载的gwt-windows-1.5.0.zip 。最后，启动Eclipse 。选择Eclipse 目录Window >Preferences > Cypal Stutio，填写GWT 相关的信息如图1所示。GWT Home 填写GWT 的解压根目录。如果Java VM 的要求较高，可以从512M 提高到1024M 。如图1 所示。</p><h2>AJAX教程(1)：AJAX简介</h2><p>AJAX教程(1)：AJAX简介网页制作Webjx文章简介：AJAX指异步JavaScript及XML（Asynchronous JavaScript And XML）。 AJAX指异步JavaScript及XML（Asynchronous JavaScript And XML）。 AJAX是一种在2005年由Google推广开来的编程模式。 AJAX不是一种新的编程语言，而是一种使用现有标准的新方法。通过AJAX，你可以创建更好、更快以及更友好的WEB应用程序。 AJAX基于JavaScript和HTTP请求（HTTP requests）。 AJAX指异步JavaScript及XML（Asynchronous JavaScript And XML）。您应当具备的基础知识在继续学习之前，您需要对下面的知识有基本的了解： *HTML/XHTML *JavaScript 如果您希望首先学习这些项目，请在我们的首页访问这些教程。 AJAX=异步JavaScript及XML（Asynchronous JavaScript and XML） AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。通过AJAX，您的JavaScript可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象，您的JavaScript可在不重载页面的情况与Web服务器交换数据。 AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。 AJAX可使因特网应用程序更小、更快，更友好。 AJAX是一种独立于Web服务器软件的浏览器技术。 AJAX基于Web标准 AJAX基于下列Web标准： *JavaScript *XML *HTML *CSS</p><h2>八爪鱼采集器使用AJAX滚动教程</h2><p>https://www.sodocs.net/doc/f2483113.html, 八爪鱼采集器使用AJAX滚动教程本文讲述采集运用了AJAX技术的网站，AJAX滚动的设置。示例网站： https://www.sodocs.net/doc/f2483113.html,/1893801487/F8yXEAh0i?ref=feedsdk&type=comment #_rnd1497952450258 相关采集教程：新浪微博数据采集 58同城信息采集搜狗微信文章采集一、AJAX滚动示例 1）打开要采集的网页，选中一条评论，然后点击“选中全部”，再点击“采集以下元素文本”，微博评论的循环列表建立完成。</p><p>https://www.sodocs.net/doc/f2483113.html, 八爪鱼采集器使用AJAX滚动教程-图1 八爪鱼采集器使用AJAX滚动教程-图2</p><p>https://www.sodocs.net/doc/f2483113.html, 如图所示，我们打开的是微博页面，要采集的数据是本条微博下，所有的评论人和评论内容。在下一个步骤中，可以通过观察循环列表，验证网页是否使用了AJAX技术。 2）验证网页是否使用了AJAX加载技术。如果是，则需设置页面加载完成后向下滚动。首先，重新打开网页，查看并点击循环框。通过循环列表，我们可以看到当前网页可以提取到15条数据。随后，将网页向下滚动，我们发现滚动条回弹了两次，新加载出来30条数据。即网页每向下滚动一次，会新加载出15条数据。同时我们发现，网页向下滚动时，不出现加载状态图标，说明该网页使用了AJAX滚动方法来加载数据，需要设置页面加载完成后向下滚动。选中“打开网页步骤”，打开“高级选项”，勾选“页面加载完成后向下滚动”，设置滚动次数为“2次”，每次间隔“2秒”，滚动方式为“向下滚动一屏”。（示例中的网页，滚动方式宜设置为“直接滚动到底部”，后文中会有说明。）</p><h2>AJAX教程(8)：AJAX 请求实例</h2><p>我们已看到 AJAX 可被用来创建更多交互性的应用程序。 AJAX Suggest实例在下面的 AJAX 例子中，我们会演示当用户向一个标准的 HTML 表单中输入数据时网页如何与 web 服务器进行通信。在下面的文本框中输入名字： First Name Suggestions：例子解释 - HTML表单表单的 HTML 代码： <form> First Name:<input type="text" id="txt1" onkeyup="showHint(this.value)" /> </form> Suggestions: <span id="txtHint"></span> 正如您看到的，这是一个简单的带有名为 "txt1" 输入域的 HTML 表单。输入域的事件属性定义了一个由 onkeyup 事件触发的函数。表单下面的段落包含了一个名为 "txtHint" 的 span，这个 span 充当了由 web 服务器所取回的数据的位置占位符。当用户输入数据时，名为 "showHint()" 的函数就会被执行。函数的执行是由"onkeyup" 事件触发的。另外需要说明的是，当用户在文本域中输入数据时把手指从键盘按键上移开时，函数 showHint 就会被调用。例子解释 - showHint() 函数 showHint() 函数是一个位于 HTML 页面 head 部分的很简单的 JavaScript 函数。</p><p>function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("您的浏览器不支持AJAX！"); return; } var url="gethint.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } 每当有字符输入文本框时，此函数就会执行。假如文本域中存在某些输入，函数就会执行： ?定义回传数据的服务器的 url（文件名） ?使用文本框的内容向 url 添加参数（q） ?添加一个随机的数字，以防止服务器使用某个已缓存的文件 ?创建一个 XMLHTTP 对象，并告知此对象当某个改变被触发时执行名为stateChanged 的函数 ?向服务器发送一个 HTTP 请求 ?如果输入域为空，此函数仅仅会清空 txtHint 占位符的内容例子解释 - GetXmlHttpObject() 函数上面的例子可调用名为 GetXmlHttpObject() 的函数。此函数的作用是解决为不同浏览器创建不同的 XMLHTTP 对象的问题。</p><h2>ajax新手入门教程-适合初学者</h2><p>初学者入门教程，来源于网络 AJAX 简介<br>AJAX 全称为“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），是一种创建交互式网页应用的网页开发技术。类似于 DHTML 或 LAMP，AJAX 不是指一种单一的技术，而是有机地利用了一系列相关的技术。 AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX 可使因特网应用程序更小、更快，更友好。 AJAX 是一种独立于 Web 服务器软件的浏览器技术。AJAX 基于下列 Web 标准： ? ? ? ? JavaScript XML HTML CSS<br>在 AJAX 中使用的 Web 标准已被良好定义，并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。<br>1. AJAX 使用 Http 请求<br>在传统的 JavaScript 编程中，假如您希望从服务器上的文件或数据库中得到任何的信息，或者向服务器发送信息的话，就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发送/获取信息，等待服务器的响应，然后一张新的页面会加载结果。由于每当用户提交输入后服务器都会返回一张新的页面，传统的 web 应用程序变得运行缓慢，且越来越不友好。通过利用 AJAX，您的 JavaScript 会通过 JavaScript 的 XMLHttpRequest 对象，直接与服务器来通信。通过使用 HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面。用户可以停留在同一个页面，他或她不会注意到脚本在后台请求过页面，或向服务器发送过数据。 XMLHttpRequest 对象:通过使用 XMLHttpRequest 对象，web 开发者可以做到在页面已加载后从服务器更新页面！您的第一个 AJAX 应用程序：为了让您理解 AJAX 的工作原理，我们将创建一个小<br><br></p> <div> <div>相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="7817032"><a href="/topic/7817032/" target="_blank">ajax基础教程</a></li> <li id="376471"><a href="/topic/376471/" target="_blank">ajax教程</a></li> </ul> </div> </div> </div> </div> <div class="category"> <h2 class="navname">相关文档</h2> <ul class="lista"> <li><a href="/doc/f65735083.html" target="_blank">ASP.NET和AJAX简洁教程</a></li> <li><a href="/doc/018625106.html" target="_blank">《移动Web开发技术基础》教学大纲2015</a></li> <li><a href="/doc/2010528867.html" target="_blank">jQuery调用AJAX异步操作超清晰教程</a></li> <li><a href="/doc/6c9708102.html" target="_blank">非常好的gwt-ext培训教程</a></li> <li><a href="/doc/dc7607032.html" target="_blank">51CTO下载-Backbonejs入门教程</a></li> <li><a href="/doc/116584280.html" target="_blank">项目1 网页制作基础知识答案【网页设计与制作项目教程】</a></li> <li><a href="/doc/5c1116180.html" target="_blank">JavaScript加强(黑马程序员冯威AJAX视频教程)</a></li> <li><a href="/doc/9c16406721.html" target="_blank">AJAX教程(1)：AJAX简介</a></li> <li><a href="/doc/e02339397.html" target="_blank">jQuery网页特效设计基础教程第12章 Ajax在jQuery中的应用教案</a></li> <li><a href="/doc/024767089.html" target="_blank">《Ajax与PHP基础教程》第六章(完)</a></li> <li><a href="/doc/1d16858216.html" target="_blank">AJAX基础教程PPT课件</a></li> <li><a href="/doc/6d934527.html" target="_blank">ASP.NET和AJAX简洁教程</a></li> <li><a href="/doc/c922796.html" target="_blank">ASP入门教程</a></li> <li><a href="/doc/f116108406.html" target="_blank">LSPOST使用手册</a></li> <li><a href="/doc/0c17166812.html" target="_blank">WebService经典学习教程</a></li> <li><a href="/doc/477603719.html" target="_blank">使用Ajax技术改进新闻发布系统</a></li> <li><a href="/doc/9f13342021.html" target="_blank">PHP教程全部PPT(共70讲)第49讲PPT教学课件</a></li> <li><a href="/doc/ed940367.html" target="_blank">AJAX教程</a></li> <li><a href="/doc/073526419.html" target="_blank">AJAX基础教程</a></li> <li><a href="/doc/1415542649.html" target="_blank">WebService经典学习教程.ppt</a></li> </ul> <h2 class="navname">最新文档</h2> <ul class="lista"> <li><a href="/doc/0919509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0d19509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9419184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3c19258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d619211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a219240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9e19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8f19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8619195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7819336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7b19336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6a19035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4b19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3d19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2919396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2819396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1219338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/e819066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/b819159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "f061cad22dc58bd63186bceb19e8b8f67c1cef71"; </script> <div class="footer"> <p>© 2013-2022 www.sodocs.net  <a href="/sitemap.html">站点地图</a> | <a href="/tousu.html" target="_blank">侵权投诉</a></p> <p><a href="https://beian.miit.gov.cn/">闽ICP备11023808号-8</a>  本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈<script type="text/javascript">tj();</script></p> </div> </div> </body> </html>