文档库 最新最全的文档下载
当前位置:文档库 › Ajax原理详解

Ajax原理详解

Ajax原理详解
Ajax原理详解

AJAX 简介
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
在 AJAX 中使用的 Web 标准已被良好定义,并被所有的主流浏览器支持。AJAX 应用程序独立于浏览 器和平台。
AJAX 事关更优秀的应用程序
Web 应用程序较桌面应用程序有诸多优势;它们能够涉及广大的用户,它们更易安装及维护,也更易开 发。 不过,因特网应用程序并不像传统的桌面应用程序那样完善且友好。 通过 AJAX,因特网应用程序可以变得更完善,更友好。
AJAX Http 请求
AJAX 使用 Http 请求
在传统的 JavaScript 编程中,假如您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器 发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交” 按钮来发送/获取信息,等待服务器的响应,然后一张新的页面会加载结果。 由于每当用户提交输入后服务器都会返回一张新的页面,传统的 web 应用程序变得运行缓慢,且越来越 不友好。

通过利用 AJAX,您的 JavaScript 会通过 JavaScript 的 XMLHttpRequest 对象,直接与服务器 来通信。 通过使用 HTTP 请求,web 页可向服务器进行请求,并得到来自服务器的响应,而不加载页面。用户可 以停留在同一个页面,他或她不会注意到脚本在后台请求过页面,或向服务器发送过数据。
XMLHttpRequest 对象
对象, 开发者可以做到在页面已加载后 通过使用 XMLHttpRequest 对象,web 开发者可以做到在页面已加载后 从服务器更新页面! 从服务器更新页面!
在 2005 年 AJAX 被 Google 推广开来(Google Suggest)。 Google 建议使用 XMLHttpRequest 对象来创建一种动态性极强的 web 界面:当您开始在 Google 的搜索框中输入查询时,JavaScript 会向某个服务器发出这些字词,然后服务器会返回一系列的搜索建 议。 XMLHttpRequest 对象得到下列浏览器的支持:Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7。
AJAX 实例
您的第一个 AJAX 应用程序
为了让您理解 AJAX 的工作原理,我们将创建一个小型的 AJAX 应用程序。 首先,我们需要一个带有两个文本框的 HTML 表单:用户名和时间。用户名文本框由用户填写,而时间 文本框使用 AJAX 进行填写。 此 HTML 文件名为 "testAjax.htm"(请注意这个 HTML 表单没有提交按钮!):

用户: 时间:


我们将在下一节解释 AJAX 的基本原理。

AJAX 浏览器支持
AJAX - 浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject, 而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建 对象。 如需针对不同的浏览器来创建此对象,我们要使用一条 "try and catch" 语句。您可以在我们的 JavaScript 教程中阅读更多有关 try 和 catch 语句 的内容。 让我们用这段创建 XMLHttpRequest 对象的 JavaScript 来更新一下我们的 "testAjax.htm" 文件:


用户: 时间:

例子解释: 例子解释: 首先声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量。 然后使用 XMLHttp=new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败,则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new

ActiveXObject("Msxml2.XMLHTTP"),假如也不成功,则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。 假如这三种方法都不起作用,那么这个用户所使用的浏览器已经太过时了,他或她会看到一个声明此浏览 器不支持 AJAX 的提示。 注释: 注释:上面这些浏览器定制的代码很长,也很复杂。不过,每当您希望创建 XMLHttpRequest 对象时, 这些代码就能派上用场,因此您可以在任何需要使用的时间拷贝粘贴这些代码。上面这些代码兼容所有的 主流浏览器:Internet Explorer、Opera、Firefox 以及 Safari。 下一节为您展示如何使用 XMLHttpRequest 对象与服务器进行通信。
AJAX - XMLHttpRequest 对象
AJAX - 更多有关 XMLHttpRequest 对象的知识
在向服务器发送数据之前,我们有必要解释一下 XMLHttpRequest 对象的三个重要的属性。
onreadystatechange 属性 onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置:
xmlHttp.onreadystatechange=function()
{ // 我们需要在这里写一些代码 }
readyState 属性 readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数 就会被执行。 这是 readyState 属性可能的值:
状态 0 1 2
描述 请求未初始化(在调用 open() 之前) 请求已提出(调用 send() 之前) 请求已发送(这里通常可以从响应得到内容头部)

3 4
请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应) 请求已完成(可以访问服务器响应并使用它)
我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成(意味着可 获得数据):
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // 从服务器的 response 获得数据 } }
responseText 属性 可以通过 responseText 属性来取回由服务器返回的数据。 在我们的代码中,我们将把时间文本框的值设置为等于 responseText:
xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } }
下一节,我们会介绍如何向服务器请求数据!
AJAX - 请求服务器
AJAX - 向服务器发送一个请求
要想把请求发送到服务器,我们就需要使用 open() 方法和 send() 方法。

open() 方法需要三个参数。第一个参数定义发送请求所使用的方法(GET 还是 POST)。第二个参数规 定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。 send() 方法可将请求送往服务器。如果我们假设 HTML 文件和 ASP 文件位于相同的目录,那么代码是 这样的:
xmlHttp.open("GET","time.asp",true); xmlHttp.send(null);
现在,我们必须决定何时执行 AJAX 函数。当用户在用户名文本框中键入某些内容时,我们会令函数“在 幕后”执行。


用户: onkeyup="ajaxFunction();"
/>

时间:



下一节介绍 "time.asp" 的脚本,这样我们完整的 AJAX 应用程序就搞定了。
AJAX -服务器端的脚本
AJAX - 服务器端的脚本
现在,我们要创建可显示当前服务器时间的脚本。 responseText 属性会存储从服务器返回的数据。 在这里, 我们希望传回当前的时间。 这是 "time.asp" 的 代码:
<% response.expires=-1 response.write(time) %>
注释: 注释:Expires 属性可设置在页面缓存失效前页面被缓存的时间(分钟)。Response.Expires=-1 指示 页面不会被缓存。
运行您的 AJAX 应用程序
请在下面的文本框中键入一些文本,然后单击时间文本框: 用户: 时间:
时间文本框可在不加载页面的情况下从 "time.asp" 获得服务器的时间!
AJAX 请求实例
可被用来创建更多交互性的应用程序。 我们已看到 AJAX 可被用来创建更多交互性的应用程序。
AJAX Suggest 实例
在下面的 AJAX 例子中,我们会演示当用户向一个标准的 HTML 表单中输入数据时网页如何与 web 服 务器进行通信。

在下面的文本框中输入名字: 在下面的文本框中输入名字:
First Name: Suggestions:
例子解释 - HTML 表单
表单的 HTML 代码:


id="txt1" onkeyup="showHint(this.value)" />
First Name:

Suggestions: id="txtHint">


正如您看到的,这是一个简单的带有名为 "txt1" 输入域的 HTML 表单。输入域的事件属性定义了一个 由 onkeyup 事件触发的函数。 表单下面的段落包含了一个名为 "txtHint" 的 span, 这个 span 充当了由 web 服务器所取回的数据的 位置占位符。 当用户输入数据时,名为 "showHint()" 的函数就会被执行。函数的执行是由 "onkeyup" 事件触发的。 另外需要说明的是, 当用户在文本域中输入数据时把手指从键盘按键上移开时, 函数 showHint 就会被调 用。
例子解释 例子解释 - showHint() 函数
showHint() 函数是一个位于 HTML 页面 head 部分的很简单的 JavaScript 函数。 此函数包含以下代码:
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 对象的问题。 这是此函数的代码:
function GetXmlHttpObject()

{ var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }
例子解释 - stateChanged() 函数
stateChanged() 函数包含下面的代码:
function stateChanged() { if (xmlHttp.readyState==4) {

document.getElementById("txtHint").innerHTML=xmlHttp.resp onseText;
} }
每当 XMLHTTP 对象的状态发生改变时,stateChanged() 函数就会执行。 当状态变更为 4(“完成”)时,txtHint 占位符的内容就被响应文本来填充。
AJAX 请求 源代码
AJAX Suggest 源代码的实例
下面的源代码属于上一节的 AJAX 实例。 您可以拷贝粘贴这些代码,然后亲自测试一下。
AJAX HTML 页面
这是 HTML 页面。它包含了一个简单的 HTML 表单,以及一个指向 JavaScript 的链接。



id="txt1" onkeyup="showHint(this.value)" />
First Name:

Suggestions: id="txtHint">





下面列出了 JavaScript 代码。
AJAX JavaScript
这是 JavaScript 代码,存储在文件 "clienthint.js" 中:
var xmlHttp
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);

}
function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }
function GetXmlHttpObject()
{ var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } }

return xmlHttp; }
AJAX 服务器页面 - ASP 和 PHP
其实不存在什么“AJAX 服务器”。AJAX 页面可以由任一因特网服务器提供服务。 在上一节的例子中被 JavaScript 调用的服务器页面是一个简单的名为 "gethint.asp" 的 ASP 文件。 下面我们列出了这个服务器页面代码的实例,使用 ASP 来编写。
AJAX ASP 实例
"gethint.asp" 页面中的代码针对 IIS 使用 VBScript 编写。它会检查一个名字数组,然后向客户端返 回相应的名字:
<% response.expires=-1 dim a(30)
'用名字为数组赋值 a(1)="Anna" a(2)="Brittany" a(3)="Cinderella" a(4)="Diana" a(5)="Eva" a(6)="Fiona" a(7)="Gunda" a(8)="Hege" a(9)="Inga" a(10)="Johanna" a(11)="Kitty" a(12)="Linda" a(13)="Nina" a(14)="Ophelia" a(15)="Petunia"

a(16)="Amanda" a(17)="Raquel" a(18)="Cindy" a(19)="Doris" a(20)="Eve" a(21)="Evita" a(22)="Sunniva" a(23)="Tove" a(24)="Unni" a(25)="Violet" a(26)="Liza" a(27)="Elizabeth" a(28)="Ellen" a(29)="Wenche" a(30)="Vicky"
'从 URL 取得参数 q q=ucase(request.querystring("q"))
'如果 q 的长度大于 0,则查找所有的 hint if len(q)>0 then hint="" for i=1 to 30 if q=ucase(mid(a(i),1,len(q))) then if hint="" then hint=a(i) else hint=hint & " , " & a(i) end if end if

next end if
'如果找不到 hint,则输出"no suggestion" '或者输出正确的值 if hint="" then response.write("no suggestion") else response.write(hint) end if %>
AJAX 数据库实例
AJAX 可用来与数据库进行动态地通信。 可用来与数据库进行动态地通信。
AJAX 数据库实例
在下面的 AJAX 例子中,我们将演示如何使用 AJAX 技术令网页从数据库读取信息。
在下面的框中选择一个名字
请选择一位客户: 客户信息将在此处列出。 客户信息将在此处列出。
AJAX 实例解释
上面的实例包含了一个简单的 HTML 表单以及执行 JavaScript 的链接:






请选择一位客户:
name="customers" onchange="showCustomer(this.value)">



id="txtHint">客户信息将在此处列出。


正如您看到的,这是一个简单的带有一个名为 "customers" 下拉列表的 HTML 表单。 表单以下的段落包含了一个名为 "txtHint" 的 div,这个 div 充当了由 web 服务器所取回的信息的位 置占位符。 当用户选择数据时,名为 "showCustomer()" 的函数会被执行。函数的执行会被 "onchange" 事件触 发。另外需要说明的是:每当用户改变下拉列表中的值,函数 showCustomer 就会被调用。 下面列出了 JavaScript 代码。
AJAX JavaScript
这是存储在文件 "selectcustomer.js" 中的 JavaScript 代码:
var xmlHttp
function showCustomer(str)
{ xmlHttp=GetXmlHttpObject(); if (xmlHttp==null)

{ alert ("您的浏览器不支持 AJAX!"); return; } var url="getcustomer.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); }
function stateChanged()
{ if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }
function GetXmlHttpObject()
{ var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) {

ajax原理介绍

ajax原理介绍 AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 主要包含了以下几种技术 Ajax(Asynchronous JavaScript + XML)的定义 基于web标准(standards-based presentation)XHTML+CSS的表示; 使用 DOM(Document Object Model)进行动态显示及交互; 使用 XML 和 XSLT 进行数据交换及相关操作; 使用 XMLHttpRequest 进行异步数据查询、检索; 使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文。 类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式,derivative/composite)的技术正在出现,如“AFLAX”。 AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。 与传统的web应用比较 传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。 与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP 或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。

jQuery Ajax 全解析(.ajax .post .get)

jQuery Ajax 全解析【.ajax .post .get】 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.wendangku.net/doc/c614891159.html,/QLeelulu/archive/2008/03 /30/1130270.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方式来进行异步请求 参数: url (String) : 发送请求的URL地址.

ajax与php结合实现用户登录(详解)

这是login.html页面 无标题文档

jQuery Ajax 应用实例解析大全

jQuery Ajax应用解析 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.wendangku.net/doc/c614891159.html,/QLeelulu/archive/2008/03/30/1130270.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方式来进行异步请求 参数: url(String) : 发送请求的URL地址. data(Map) : (可选) 要发送给服务器的数据,以Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。 callback(Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 这是一个简单的GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用$.ajax。示例代码: $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){

Ajax实现原理

Ajax实现原理 Ajax的工作 Ajax直觉认识:我们发送一个请求,但是这个请求比较特殊它是异步的,也就是说客户端是不会感觉到的。在发送这个请求的时候我们绑定了一个事件,这个事件会监控我们发送请求的状态,并且每次状态改变都会触发,所以我们就可以根据不同的状态让他执行不同的操作。请求到达服务器端的后服务器端根据相应的请求返回对应的信息,这个返回信息我们可以取得并且是异步得到,不会引起客户端刷新。既然在上面已经绑定了监控状态变化的事件,我们就可以在那里首先做好在得到返回信息要做的处理(当然如果失败也会有相应的状态我们也会做出相应的处理),我们在处理中得到返回信息通过javascript在客户端做相应操作即可。 Ajax核心—XMLHttpRequest 上面我们大概感受了一下Ajax的过程,我们发现发送异步请求才是核心,事实上它就是XMLHttpRequest,整个Ajax之所以能完成异步请求完全是因为这个对应可以发送异步请求的缘故。而且我们又发现上面那个事件就是整个处理过程的核心,可以根据不同状态执行不同操作,其实它就是XMLHttpRequest的方法onreadystatechange,它在每次状态发生改变时都会触发。那么是谁取得的返回信息呢?它就是XMLHttpRequest的另一个方法responseText(当然还有responseXML)。(⊙o⊙)哦,我们还没有说发送给谁以及执行发送操作,这两个就是XMLHttpRequest的open和send方法。Y(^o^)Y,其他的当然还有了,我们直接列出来吧:

代码实现 ajax.js文件代码,也是我们说的主要内容,是一个javascript文件,所有的Ajax操作都在这里: view plaincopy to clipboardprint? 1.//与服务器通信 2.function talktoServer(url) { 3. var req = newXMLHTTPRequst(); 4. var callbackHandler = getReadyStateHandler(req); 5. req.onreadystatechange = callbackHandler; 6. req.open("POST", url, true); 7. req.setRequestHeader("Content-Type", "application/x-www-form-urlen coded"); 8. var testmsg = document.getElementById("testmsg"); 9. var msg_value = testmsg.value; 10. req.send("msg="+msg_value); 11.} 12.//创建XMLHTTP对象 13.function newXMLHTTPRequst() { 14. var xmlreq = false; 15. if (window.XMLHttpRequest) { 16. xmlreq = new XMLHttpRequest(); 17. } else if (window.ActiveXobject) { 18. try{ 19. xmlreq=new ActiveXObject("Msxm12.XMLHTTP"); 20. } catch (e1) {

PHP JQUERY AJAX 提交表单FORM详解

PHP jQuery Ajax Form表单提交实例解析,包括创建一个表单html页面、添加JQuery代码、jquery ajax表单提交、jquery ajax表单验证、反馈信息给用户,php ajax 表单验证,php ajax提交表单,php ajax form验证,php ajax提交form。 本实例用到JQuery类库本身的函数和功能,所有表单信息利用PHPMailer类库邮件的形式发送。 1、创建一个表单html页面 表单部分html代码 这里用一个id为contact_form来包含整个包含信息;这是有意义的,稍后在JavaScript与用户交互信息的时候会用到,这里form标签的属性里面既包含了method和action;这个意义其实不大,因为Javascript直接操作DOM,所以没有这两个属性也是可以的;务必要给用户输入的input标签加独立的id,这和第二点原理类似。否则,无法看到正常的效果。 2、添加JQuery代码 这里假设你已经从JQuery官方网站上下载了JQuery基库,然后上传到了你的WEB服务器,并添加到你要使用的网页中。

现在新建一个JS文件 第1行的function()函数与Jquery的document.ready函数用法和功能相同,都是在DOM准备完毕后自动触发。第2行里面是一个单击触发函数click(),需要注意的是,在HTML一页提交按钮上需要放置一个名为“button”的Class,以模拟实现submit 提交表单的功能,从第二点我们可以看出,JQuery可以很好的将结构和逻辑分离。 3、jquery ajax表单验证 在实际应用中,这一步是必不可少的。在用户漏填,错填某个项目时,及时提示。

从后端向前端传递数据到ajax

1.创建Java工程 js 插件引入 highcharts.js jquery-1.8.3.min.js myjs.js 引入ajax 2.前端代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> My JSP 'index.jsp' starting page