非常简单的Ajax请求实例附源码

2024-09-26 21:38:27

Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。通过Ajax，您可以使用 JavaScript的XMLHttpRequest对象来直接与服务器进行通信。您可以在不重载页面的情况与 Web 服务器交换数据。在本文的例子中，我们将演示当用户向一个标准的HTML表单中输入数据时网页如何与web服务器进行通信。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>简单的Ajax请求</title>
 <script type="text/javascript">
  var xmlHttp;
  // 创建XMLHttpRequest对象
  function createXMLHttpRequest() {
   if (window.ActiveXObject) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
   }
  }
  // 整合url参数
  function createQueryString() {
   var name = document.getElementById("txtName").value;
   var sex = document.getElementById("txtSex").value;
   var birthday = document.getElementById("txtBirthday").value;
   var queryString = "Name=" + encodeURIComponent(name) + "&Sex=" + encodeURIComponent(sex) + "&Birthday=" + encodeURIComponent(birthday);
   return queryString;
  }
  // 按照Get方式传递参数
  function doRequestUsingGET() {
   createXMLHttpRequest();
   var queryString = "AjaxServer.ashx?";
   queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime();
   xmlHttp.onreadystatechange = handleStateChange;
   xmlHttp.open("GET", queryString, true);
   xmlHttp.send(null);
  }
  // 按POST方式传递参数
  function doRequestUsingPOST() {
   createXMLHttpRequest();
   var url = "AjaxServer.ashx?timeStamp=" + new Date().getTime();
   var queryString = createQueryString();
   xmlHttp.open("POST", url, true);
   xmlHttp.onreadystatechange = handleStateChange;
   xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
   xmlHttp.send(queryString);
  }
  // 回调函数
  function handleStateChange() {
   if (xmlHttp.readyState == 4) {
    if (xmlHttp.status == 200) {
     parseResults();
    }
   }
  }
  // 处理服务器响应内容
  function parseResults() {
   var responseDiv = document.getElementById("serverResponse");
   if (responseDiv.hasChildNodes()) {
    responseDiv.removeChild(responseDiv.childNodes[0]);
   }
   var responseText = document.createTextNode(xmlHttp.responseText);
   responseDiv.appendChild(responseText);
  }
 </script>
</head>
<body>
 <form action="#">
 <h2>输入你的名字,性别,生日：</h2>
 <table>
  <tr><td>名字：</td><td><input type="text" id="txtName" /></td></tr>
  <tr><td>性别：</td><td><input type="text" id="txtSex" /></td></tr>
  <tr><td>生日：</td><td><input type="text" id="txtBirthday" /></td>
  </tr>
 </table>
 <input type="button" value="用Get方式传参数" onclick="doRequestUsingGET();"/>
 <br /><br />
 <input type="button" value="用POST方式传参数" onclick="doRequestUsingPOST();"/>
 </form>
 <br />
 <h3>服务器响应内容：</h3>
 <div id="serverResponse"></div>
</body>
</html>

下面来详细说明每个JS函数的功能。
createXMLHttpRequest() 用来创建XMLHttpRequest对象。
因为IE把XMLHttpRequest实现为一个ActiveX对象，其他浏览器(FF/Safari/Opera)把它实现为一个本地JavaScript对象。由于存在这些差别，JavaScript代码中必须包含有关的逻辑。
createQueryString() 用来整理参数，将Ajax请求要传递的参数整理成一定的格式。
如果传递中文或非ASCII字符必须进行URL编码，本例使用JS的encodeURIComponent()函数进行参数URL编码。
doRequestUsingGET() 以HTTP GET方式向服务器发送请求，并且传递参数。
XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个参数：一个是指示所使用的方法(通常是GET或POST)的串；一个是表示目标资源URL的串；一个是Boolean值，只是请求是否是异步的。
GET请求时，将传递的参数写到open方法的url参数中，此时send方法的参数为null。
在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，这就会带来不好的结果，把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免浏览器缓存结果。
本例服务器端代码使用的是asp.net(c#)。
doRequestUsingPOST() 以HTTP POST方式向服务器发送请求，并且传递参数。
确保open()中指定的方法是POST，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容。设置头信息前必须先调用open方法。
必须使用send方法传递参数。参数的提交格式和GET方法中url的写法一样。
handleStateChange() Ajax回调函数。
对于XMLHttpRequest对象，onreadystatechange属性存储了回调函数的指针。当XMLHttpRequest对象内部状态发生变化时，就会调用这个回调函数。
parseResults() 处理响应结果。

以上就是一个很简单的Ajax请求实例，欢迎大家学习，下载Ajax请求实例。

AJAX跨域请求json数据的实现方法

我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法: Js代码复制代码代码如下: jQuery.getJSON("http://search.twitter.
多ajax请求的各类解决方案(同步, 队列, cancel请求)

•多个ajax请求同时发送,相互无依赖. •多个ajax请求相互依赖,必须有先后顺序. •多个请求被同时发送,只需要最后一个请求. 第1种case 应用场景: 这个场景很多,一个页面打开是多个区域同时请求后台得到各自的数据,没依赖,没顺序. 处理方案: 直接用jquery的ajax函数.这个用的非常多,这里从略,可看后面的代码中例子. 第2种case 应用场景: 多个ajax请求,需要顺序执行,后一个ajax请求的执行参数是前一个ajax的结果.例如: 用户登录后我们发送一次请求得到用户的应用I
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因

看到别人写的JS,ajax请求地址后加随机参数,比如XXXX?t= + new Date().getTime(). 一开始搞不懂为什么,网上查了资料,原因是防止浏览器缓存. 浏览器为了提高用户访问同一页面的速度,会对页面数据进行缓存.当url请求地址不变时, 有时候会导致浏览器不发送请求,直接从缓存中读取之前的数据. 如果数据改变了,而没加随机数,读取的数据会跟之前一样. 加上随机数,就是欺骗浏览器url改变了,会每次都向服务器发送请求而不去读缓存
如何将ajax请求返回的Json格式数据循环输出成table形式

首先,Ajax请求数据,(用的是Jquery的Ajax) 复制代码代码如下: <script> $(function(){ $('#test').click(function(){ $.ajax({ url:'__APP__/Article/jsonTest', type:'post', success:function(data){ var item; $.each(data,function(i,result){ item = "<tr><td>&quo
AJAX中同时发送多个请求XMLHttpRequest对象处理方法

在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费.解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有空闲的对象,则使用此对象,否则将创建一个新的对象. 下面是我最近写的一个简单的类:* XMLHttpRequest Object Pool * * @author legend <legendsky@hotmai
jquery的ajax异步请求接收返回json数据实例

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码代码如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "json
AJAX避免用户重复提交请求实现方案

在使用AJAX(jQuery)异步请求数据时,为了避免因某些原因用户同时多次点击按钮,提交重复的请求,我们需要禁用请求提交按钮. 重点:jQuery的 attr 和 removeAttr 两个函数,主要是元素button的disabled属性. Demo: 复制代码代码如下: <body> <a class="disabled">Button disabeld</a> <a class="abled">Butt
JQuery的Ajax跨域请求原理概述及实例

今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.
跨域请求之jQuery的ajax jsonp的使用解惑

直接执行了error方法提示错误--ajax jsonp之前并没有用过,对其的理解为跟普通的ajax请求差不多,没有深入了解:出现了这种错误,几经调试(检查后台的代码和js部分的属性设置)还是不行,让我感觉很是意外和不解.于是,决定仔细研究下ajax jsonp的使用,并将最后测试成功的学习经验和大家分享下! 首先,贴出可以成功执行的代码: (页面部分) 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
jquery跨域请求示例分享(jquery发送ajax请求)

jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数.原型如下: jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据. url: 发送请求的地址data : (可选) 待发送key/value参数callback: (可选) 载入成功时的回调函数主要用于客户端获取服务器JSON数据.简单示例: 服务器脚本,返回JSON数据: 复制代码代码如下: // $.getJSON.php$
ajax请求成功后新开窗口window.open()被拦截解决方法

问题: 前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢? 分析: 浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了(不过如果是 _self 的话就不会有这个限制),即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所
Extjs ajax同步请求时post方式参数发送方式

ajax同步请求一般下面这样: 复制代码代码如下: var conn = Ext.lib.Ajax.getConnectionObject().conn; conn.open("POST", 'http://localhost:8080/struts2study/TreeDDGet?node=-1',false); // 这里的conn对象其实就是 xmlHttpRequest 对象. conn.setRequestHeader("Content-Type",&q
Ajax请求中的异步与同步，需要注意的地方说明

之前做项目时候,用到一个表格控件,它的数据是异步加载的,我在这个表格绑定数据的函数下面友做了一些业务处理,运行页面的时候,用浏览器在我写业务处理那地方打上断点跟踪,它确实执行了,可以最后显示的时候,它的处理被覆盖了,我很纳闷,当时也知道是这个表格绑定函数那出问题了,可是时间紧,它的函数是封装的,没有去具体跟踪,就直接让我的那部分业务处理延迟200ms执行,这样就好了,这是个笨法,不过也是个有效的办法,呵呵. 后来看了下文档,查了些资料,其实原理应该是这样的: 默认设置下,所有请求均为异步请求.如
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享

我知道这些函数都是异步执行(asyncronously)并且会延迟一段时间返回,所以我想知道是否有一种方式,使我可以使用单个回调,并行地加载它们,就像JS加载器 curljs 所做的那样. 很幸运! 通过jQuery.when, 我可以并发地加载两个请求,只执行一次回调! jQuery 脚本正如我提到的,下面是加载脚本和一个JSON资源的用例: 复制代码代码如下: $.when( $.getScript('/media/js/wiki-min.js?build=21eb633'), $.ge
js每隔5分钟执行一次ajax请求的实现方法

一个页面好像只能有一个 window.onload=function(){},所以要有多个事件,这样写就好了复制代码代码如下: window.onload=function(){ //假设这里每个五分钟执行一次test函数 publicBusi(); personBusi(); } function publicBusi(){ setTimeout(personBusi,1000*60*7);//这里的1000表示1秒有1000毫秒,1分钟有60秒,7表示总共7分钟 $.post('${ba
JQuery的Ajax请求实现局部刷新的简单实例

请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带set get方法)接收,返回的data是一个JQuery的数组对象,在被调用的action中涉及到的数据变量会对象,都会封装到data中最终返回给页面. 案例:如图我要实现状态的更改,用JQuery的Ajax更改完之后图标发生改变,实现页面的局部刷新原理:局部刷新是刷新页面的一部分,在此案例中实现的只是图标的改变,把后台代码和前台现实的图标分离,并不是对数据库重新做查询,二是后台数显数据修改之后,前台直接改
基于Jquery 解决Ajax请求的页面浏览器后退前进功能，页面刷新功能实效问题

需要使用的 jquery.history.js插件在巨人的肩膀之上,以下前进后退工作基于插件完成! 做了几个兼职,上天帮人完成页面的时候顺便做了一个ajax的请求.发现浏览器的刷新,后退,前进按钮失效.于是乎google了一下.发现了一些解决方法.其中一个jquery.hashchange.js的插件有的时候会失效,有的时候会造成页面多次请求. 换另外一个插件测试下,完美达到我的要求. 总的思路,在url上加上参数,一切工作基于这个参数完成. 复制代码代码如下: //截取传入字符串中第一次出
Jquery Ajax学习实例向页面发出请求，返回XML格式数据

一.AjaxSample.aspx 处理业务数据,产生XML数据,供JqueryRequest.aspx调用,代码如下: 复制代码代码如下: protected void Page_Load(object sender, EventArgs e) { string uid = Request.QueryString["username"]; string pwd = Request.QueryString["password"]; Response.Content
Ajax请求内嵌套Ajax请求示例代码

前段时间做项目,需要把全国省市的两个XML文件整合成一个JSON格式的数据,手写的话觉得数据太多了,而且容易出错,于是就想到了用Ajax嵌套的方法来解决,就想平时用Ajax的方法直接嵌套,都会先读出外面Ajax的内容,然后才读取嵌套在Ajax里面的内容,后面经网上查找资料,加个async:false这个Ajax参数就行了,下面是贴代码: <script type="text/javascript"> $(function () { $.ajax({ type: "
jquery ajax请求方式与提示用户正在处理请稍等

初次使用$.ajax() ,我没有去区分过ajax的异步请求和同步请求的不同,刚开始使用同步请求,以至后来出现许多问题,特别在体验度方面. 异步和同步: 同步意味着执行完一段程序才能执行下一段,它属于阻塞模式,其表现在网页上的现象是--浏览器会锁定页面(即所谓的页面假死状态),用户不能操作其它的,必须等待当前请求返回数据.而使用异步方式请求,页面不会出现假死现象. 提升用户体验度: 当用户提交数据等待页面返回结果是需要时间的,有时这段等待时间比较长,为了提高用户体验度,我们通常会给出 "正在处理
浅析ajax请求json数据并用js解析(示例分析)

自从接触了jquery就喜欢上了前端开发,而且深深感受到了前端开发的强大与重要之处.同时也想为asp.net鸣不平,事实上asp.net并没有臃肿,说它臃肿的人无非是那些不了解它的人,可能他们看见过一些asp.net低级程序员在不断往页面里拖控件,然后发现生成的页面中含有大量的垃圾代码,而且几乎把所有的逻辑处理都写在了服务器端,觉得服务器压力太大了.事实上,刚入门asp.net的人会有拖控件的习惯,但是当你再深入你会发现,最终asp.net的开发模式还是跟PHP.jsp等其它web开发模式是一样

非常简单的Ajax请求实例附源码

相关推荐

随机推荐