ajax

$.ajax({url:"process.jsp",type:"POST",data:"sessionid=" sessionid,success:function(data){$("#yourdiv").empty().append(data);}});//注：清空相应DIV并把服务器返回的数据append进去就能实现你说的更新了。

这个问题感觉跟ajax加载数据的特点有关，在请求成功加载元素后，已经实例化的swiper就找不到需要渲染的元素了，这里的话，通过定时器--他的异步任务处理方式来渲染就可以了。。简单的说，就是在success后给一个setTimeou来实例化swiper。

这次给大家带来ajax怎么实现图片的预览上传以及查看缩略图，ajax实现图片的预览上传以及查看缩略图的注意事项有哪些，下面就是实战案例，一起来看一下。要实现功能，上传图片时可以预览，因还有别的文字，所以并不只上传图片，实现与别的文字一起保存，当然上来先上传图片，然后把路径和别的文字一起写入数据库；同时为图片生成缩略图，现只写上传图片方法，文字在ajax里直接传参数就可以了，若要上传多图，修改一下就可以了。借鉴了网上资料，自己写了一下，并不需要再新加页面，只在一个页面里就OK啦。JS代码：//ajax保存数据，后台方法里实现此方法 function SaveData() { filename = document.getElementById("idFile").value; result =test_test_aspx.SaveData(filename).value; if (result) { alert("保存成功！"); } return false; } //实现预览功能 function DrawImage(ImgD) { var preW = 118; var preH = 118; var image = new Image(); image.src = ImgD.src; if (image.width > 0 && image.height > 0) { flag = true; if (image.width / image.height >= preW/ preH) { if (image.width > preW) { ImgD.width = preW; ImgD.height = (image.height * preW) / image.width; } else { ImgD.width = image.width; ImgD.height = image.height; } ImgD.alt = image.width + "x" + image.height; } else { if (image.height > preH) { ImgD.height = preH; ImgD.width = (image.width * preH) / image.height; } else { ImgD.width = image.width; ImgD.height = image.height; } ImgD.alt = image.width + "x" + image.height; } } } //当idFile内容改变时 function FileChange(Value) { flag = false; document.getElementById("showImg").style.display = "none"; document.getElementById("idImg").width = 10; document.getElementById("idImg").height = 10; document.getElementById("idImg").alt = ""; document.getElementById("idImg").src = Value; }以下为前台代码：<p class="cbs"> <p class="l"><label>图片:</label></p> <p> <input id="idFile" name="pic" type="file" runat="server" onchange="FileChange(this.value);" /> </p> </p> <p class="cbs"> <p class="l"><label>预览:</label></p> <p> <img id="idImg" height="0" width="0" src="" alt="" onload="DrawImage(this);" /> //实现预览 <img id="showImg" width="118" height="118" alt="" runat="server" style="display:none"/> //加这个主要是为了实现查看时显示图片，因为上面的（idImg）加上runat="server"报错，如有好的方法可以留言 </p> </p>以下为AJAX方法：[Ajax.AjaxMethod()] public bool SaveData(string fileNamePath) { string serverFileName = ""; string sThumbFile = ""; string sSavePath = "~/Files/"; int intThumbWidth = 118; int intThumbHeight = 118; string sThumbExtension = "thumb_"; try { //获取要保存的文件信息 FileInfo file = new FileInfo(fileNamePath); //获得文件扩展名 string fileNameExt = file.Extension; //验证合法的文件 if (CheckFileExt(fileNameExt)) { //生成将要保存的随机文件名 string fileName = GetFileName() + fileNameExt; //检查保存的路径 是否有/结尾 if (sSavePath.EndsWith("/") == false) sSavePath = sSavePath + "/"; //按日期归类保存 string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/"; if (true) { sSavePath += datePath; } //获得要保存的文件路径 serverFileName = sSavePath + fileName; //物理完整路径 string toFileFullPath = HttpContext.Current.Server.MapPath(sSavePath); //检查是否有该路径 没有就创建 if (!Directory.Exists(toFileFullPath)) { Directory.CreateDirectory(toFileFullPath); } //将要保存的完整文件名 string toFile = toFileFullPath + fileName; ///创建WebClient实例 WebClient myWebClient = new WebClient(); //设定windows网络安全认证 myWebClient.Credentials = CredentialCache.DefaultCredentials; //要上传的文件 FileStream fs = new FileStream(fileNamePath, FileMode.Open, FileAccess.Read); //FileStream fs = OpenFile(); BinaryReader r = new BinaryReader(fs); //使用UploadFile方法可以用下面的格式 //myWebClient.UploadFile(toFile, "PUT",fileNamePath); byte[] postArray = r.ReadBytes((int)fs.Length); Stream postStream = myWebClient.OpenWrite(toFile, "PUT"); if (postStream.CanWrite) { postStream.Write(postArray, 0, postArray.Length); } postStream.Close(); //以上为原图 try { //原图加载 using (System.Drawing.Image sourceImage = System.Drawing.Image.FromFile(System.Web.HttpContext.Current.Server.MapPath(serverFileName))) { //原图宽度和高度 int width = sourceImage.Width; int height = sourceImage.Height; int smallWidth; int smallHeight; //获取第一张绘制图的大小,(比较 原图的宽/缩略图的宽 和 原图的高/缩略图的高) if (((decimal)width) / height <= ((decimal)intThumbWidth) / intThumbHeight) { smallWidth = intThumbWidth; smallHeight = intThumbWidth * height / width; } else { smallWidth = intThumbHeight * width / height; smallHeight = intThumbHeight; } //判断缩略图在当前文件夹下是否同名称文件存在 int file_append = 0; sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(fileName) + fileNameExt; while (System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath(sSavePath + sThumbFile))) { file_append++; sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(fileName) + file_append.ToString() + fileNameExt; } //缩略图保存的绝对路径 string smallImagePath = System.Web.HttpContext.Current.Server.MapPath(sSavePath) + sThumbFile; //新建一个图板,以最小等比例压缩大小绘制原图 using (System.Drawing.Image bitmap = new System.Drawing.Bitmap(smallWidth, smallHeight)) { //绘制中间图 using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap)) { //高清,平滑 g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; g.Clear(Color.Black); g.DrawImage( sourceImage, new System.Drawing.Rectangle(0, 0, smallWidth, smallHeight), new System.Drawing.Rectangle(0, 0, width, height), System.Drawing.GraphicsUnit.Pixel ); } //新建一个图板,以缩略图大小绘制中间图 using (System.Drawing.Image bitmap1 = new System.Drawing.Bitmap(intThumbWidth, intThumbHeight)) { //绘制缩略图 using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap1)) { //高清,平滑 g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; g.Clear(Color.Black); int lwidth = (smallWidth - intThumbWidth) / 2; int bheight = (smallHeight - intThumbHeight) / 2; g.DrawImage(bitmap, new Rectangle(0, 0, intThumbWidth, intThumbHeight), lwidth, bheight, intThumbWidth,intThumbHeight, GraphicsUnit.Pixel); g.Dispose(); bitmap1.Save(smallImagePath, System.Drawing.Imaging.ImageFormat.Jpeg); return true; } } } } } catch { //出错则删除 System.IO.File.Delete(System.Web.HttpContext.Current.Server.MapPath(serverFileName)); return false; } } else { return false; } } catch (Exception e) { return false; } } /// <summary> /// 检查是否为合法的上传文件 /// </summary> /// <param name="_fileExt"></param> /// <returns></returns> private bool CheckFileExt(string _fileExt) { string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg" }; for (int i = 0; i < allowExt.Length; i++) { if (allowExt[i] == _fileExt) { return true; } } return false; } //生成随机数文件名 public static string GetFileName() { Random rd = new Random(); StringBuilder serial = new StringBuilder(); serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff")); serial.Append(rd.Next(0, 999999).ToString()); return serial.ToString(); }相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：ajax怎样提交form表单与实现文件上传Ajax向后台传输json格式数据出现错误应如何处理

这次给大家带来ajax的三级联动菜单栏如何实现，ajax三级联动菜单栏实现的注意事项有哪些，下面就是实战案例，一起来看一下。本文实例为大家分享了ajax三级联动展示的具体代码，供大家参考，具体内容如下1. test.php<script src="../jquery-1.11.2.min.js"></script><script src="sanji.js"></script><title>无标题文档</title></head><body><h1>三级联动</h1><p id="sanji"></p></body></html>2. sanji.js// JavaScript Document$(document).ready(function(e) { //找到ID=SANJI的p，造三个下拉扔进去 $("#sanji").html("<select id="sheng"></select><select id="shi"></select><select id="qu"></select>"); //加载省的数据 LoadSheng(); //加载市的数据 LoadShi(); //加载区的数据 LoadQu(); //给省的下拉加点击事件 $("#sheng").click(function(){ //重新加载市 LoadShi(); //重新加载区 LoadQu(); }) //给市的下拉加点击事件 $("#shi").click(function(){ //重新加载区 LoadQu(); })});//加载省份的方法function LoadSheng(){ //省的父级代号 var pcode = "0001"; $.ajax({ async:false, url:"chuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.trim().split("|"); var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str = str+"<option value=""+lie[0]+"">"+lie[1]+"</option>"; } $("#sheng").html(str); } });}//加载市的方法function LoadShi(){ //找市的父级代号 var pcode = $("#sheng").val(); $.ajax({ async:false, url:"chuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.trim().split("|"); var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str = str+"<option value=""+lie[0]+"">"+lie[1]+"</option>"; } $("#shi").html(str); } });}//加载区的方法function LoadQu(){ //找区的父级代号 var pcode = $("#shi").val(); $.ajax({ url:"chuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.trim().split("|"); var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str = str+"<option value=""+lie[0]+"">"+lie[1]+"</option>"; } $("#qu").html(str); } });}3. chuli.php<?php//给一个父级代号，返回该父级代号下所有的子地区require "DBDA.class.php";$db=new DBDA();$pcode=$_POST["pcode"];$sql="select areacode,areaname from chinastates where parentareacode="{$pcode}"";echo $db->StrQuery($sql);引用的封装类里面返回字符串的方法<?phpclass DBDA{ public $host = "localhost"; public $uid = "root"; public $pwd = "123"; public $dbname = "test_123"; //执行SQL语句返回相应的结果 //$sql 要执行的SQL语句 //$type 代表SQL语句的类型，0代表增删改，1代表查询 function query($sql,$type=0) { $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); $result = $db->query($sql); if($type) { //如果是查询，显示数据 return $result->fetch_all(); } else { //如果是增删改，返回true或者false return $result; } } //返回字符串的方法 public function strquery($sql,$type=1) { $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); $result = $db->query($sql); $arr = $result->fetch_all(); $str=""; foreach($arr as $v) { $str = $str.implode("^",$v)."|"; } $str = substr($str,0,strlen($str)-1); return $str; } //返回JSON function JSONQuery($sql,$type=1) { $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); $r = $db->query($sql); if($type==1) { return json_encode($r->fetch_all(MYSQLI_ASSOC)); } else { return $r; } }}相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：怎样让浏览器记住ajax请求并控制浏览器前进和后退AJAX在不刷新的情况下检测输入的用户名

jquery 的ajax 不是单纯的js的ajax

这次给大家带来ajax怎样实现不刷新的情况下上传文件，ajax实现不刷新上传文件的注意事项有哪些，下面就是实战案例，一起来看一下。本文实例为大家分享了ajax实现无刷新上传文件功能的具体代码，供大家参考，具体内容如下详细代码如下<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>ajax无刷新上传文件</title><script>window.onload = function(){ var oBtn = document.getElementById("btn"); var oMyFile = document.getElementById("myFile"); oBtn.onclick = function() { //alert(oMyFile.value); //获取到的是file控件的value值,这个内容是显示给你看的文字,不是我们选择的文件 //oMyFile.files file控件中选择的文件列表对象 //alert(oMyFile.files); //我们是要通过ajax把oMyFile.files[0]数据发送给后端 /* for (var attr in oMyFile.files[0]) { console.log( attr + " : " + oMyFile.files[0][attr] ); } */ //利用ajax发送必须要有一个ajax对象 var xhr = new XMLHttpRequest(); //监听上传事件 xhr.onload = function(){ //alert(1); //alert(this.responseText);//后端返回的数据 var d = JSON.parse(this.responseText); alert(d.msg + " : " + d.url); //显示上传成功 并且显示文件路径 } xhr.open("post","post_file.php",true); //open打开的方式不能使用get,上传文件的地址,使用异步上传 //在使用post发送的时候必须要带一些请求头信息 xhr.setRequestHeader("X-Request-With", "XMLHttpRequest"); //send要发送数据 //将要上传的数据转换成二进制数据 //那么必须知道后端接收当前文件的名称是什么 然后后面带上当前文件的数据 var oFormData = new FormData(); //通过FormData来构建提交数据 oFormData.append("file",oMyFile.files[0]); xhr.send(oFormData); }}</script></head><body> <input type="file" id="myFile" /><input type="button" id="btn" value="上传" /></body></html>后端php代码post_file.php<?phpheader("Content-type:text/html; charset="utf-8"");$upload_dir = "uploads/";if(strtolower($_SERVER["REQUEST_METHOD"]) != "post"){ exit_status(array("code"=>1,"msg"=>"错误提交方式"));}if(array_key_exists("file",$_FILES) && $_FILES["file"]["error"] == 0 ){ $pic = $_FILES["file"]; if(move_uploaded_file($pic["tmp_name"], $upload_dir.$pic["name"])){ exit_status(array("code"=>0,"msg"=>"上传成功","url"=>$upload_dir.$pic["name"])); }}echo $_FILES["file"]["error"];exit_status(array("code"=>1,"msg"=>"出现了一些错误"));function exit_status($str){ echo json_encode($str); exit;}?>相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：用CORS实现WebApi Ajax跨域请求的方法Ajax怎么实现动态加载组合框（附代码）

区别在于ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。

这次给大家带来怎么用ajax如何实现大文件上传的功能，用ajax实现大文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。大家都知道php上传文件有限制，如果没有修改过php.ini文件的话，默认的上传大小限制为2M，那么该如何上传大文件了，比如说上传一个1G多的大文件，可以使用大文件切割上传的方式来解决。何为大文件切割上传？ 原理：利用HTML5的新特性，将文件内容切割成分段的二进制信息，然后每次向服务器上传一段，而服务器，只需要把我们每次上传的二进制信息整合存储到一个文件中，那么最后这个文件就是所上传的文件。由于php.ini默认的上传大小为2M，如果每批都上传2M，我测试的时候时间比较长，这里我将其限制大小该为20M,最大post数据为28M，便于测试。如果实际开发中不能修改其参数，则每批上传的数据不能超过最大限制。post_max_size = 28M upload_max_filesize = 20M我的是在nginx里面上传所以还需要修改Nginx配置文件/etc/nginx/nginx.con//在http{} 里面加即可 client_max_body_size 50m#客户端最大上传大小 50MJavaScript中的File对象在之前的文章中我们已经使用到了这个Api，File对象中保存了文件的大小、名称、类型等信息JavaScript中的Blob对象 Blob对象是二进制对象，也是File对象的父类，Blob对象中有一个很重要的方法：slice() 方法，利用这个方法我们可以把文件内容切割成二进制信息。slice() 方法接受三个参数，起始偏移量，结束偏移量，还有可选的 mime 类型。如果 mime 类型，没有设置，那么新的 Blob 对象的 mime 类型和父级一样。上传页面index.php：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>大文件切割上传</title> <link rel="stylesheet" href=""> <script> function selfile(){ const LENGTH = 1024 * 1024 * 10;//每次上传的大小 var file = document.getElementsByName("video")[0].files[0];//文件对象 var filename=document.getElementsByName("video")[0].files[0].name; var totalSize = file.size;//文件总大小 var start = 0;//每次上传的开始字节 var end = start + LENGTH;//每次上传的结尾字节 var fd = null//创建表单数据对象 var blob = null;//二进制对象 var xhr = null;//xhr对象 while(start < totalSize){ fd = new FormData();//每一次需要重新创建 xhr = new XMLHttpRequest();//需要每次创建并设置参数 xhr.open("POST","upload.php",false); blob = file.slice(start,end);//根据长度截取每次需要上传的数据 fd.append("video",blob);//添加数据到fd对象中 fd.append("filename",filename); //获取文件的名称 xhr.send(fd);//将fd数据上传 //重新设置开始和结尾 start = end; end = start + LENGTH; } } </script> </head> <body> <h1>大文件切割上传</h1> <input type="file" name="video" onchange="selfile();" /> </body> </html>接收数据页面upload.php：<?php /** * 大文件切割上传，把每次上传的数据合并成一个文件 */ $filename = "./uploads/".$_POST["filename"];//确定上传的文件名 //第一次上传时没有文件，就创建文件，此后上传只需要把数据追加到此文件中 if(!file_exists($filename)){ move_uploaded_file($_FILES["video"]["tmp_name"],$filename); }else{ file_put_contents($filename,file_get_contents($_FILES["video"]["tmp_name"]),FILE_APPEND); } ?>测试之前，先创建uploads文件夹如果是linux系统的话 切记给uploads给权限sudo chmod -R 777 uoloads/ //赋予uploads文件夹 777 权限 -R 递归子文件相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：怎样用Ajax异步检查用户名有无重复ajax获取json数据为undefined应该如何使用

ajax请求的五个步骤如下步骤如下五个步骤1.创建异步对象，首先，创建一个XMLHttpRequest异步对象。2.设置请求方式和地址，然后，设置请求方式和请求地址3.用send发送请求，接着，用send发送请求。4.监听状态变化，然后，监听状态变化。5.接收返回的数据，最后，接收返回的数据

客户端:新建一个任意名字.html <html> <head> <script type="text/javascript"> function test(name){ var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlHttp.open("GET","checkUser.asp?name="+name,true); xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200){ if(xmlHttp.responseText="yes") alert("可以用"); else alert("用户名已经存在!"); } } } xmlHttp.send(null); } </script> </head> <body> <input type="button" value="Ajax" onclick="test("aaa");"/> </body> </html> 服务器端：新建一个checkUser.asp <% "为了简化，我不读取数据库 if(Request.QueryString("name")="aaa") Response.Write("yes"); %>

可以用，可以不用。

//判断不同浏览器，采用不同方式创建XMLHttpRequest对象 function createXmlHttpRequest(){ if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP");//windows浏览器 }else if(window.XMLHttpRequest){ return new XMLHttpRequest();//其他浏览器 } }

这次给大家带来怎么实现Ajax的三级联动商品分类，实现Ajax的三级联动商品分类的注意事项有哪些，下面就是实战案例，一起来看一下。思路分析：效果：当页面加载时，利用ajax异步向后台请求数据，加载一级商品类别，当选择一级商品时加载二级商品，选择二级商品加载三级商品。实现：1、当拿到数据后加载pid为0的商品，并动态创建option将商品追加到一级菜单中，并设置value值2、当选择一级商品时加载pid=当前id的商品，并创建option将商品追加到二级菜单中，并设置value值3、当选择二级商品时加载pid=当前id的商品，并创建option将商品追加到三级菜单中，并设置value值页面效果：$(function(){ //请求路径 var url="03goods.php"; //option默认内容 var option="<option value="0">未选择</option>"; //获取jq对象 var $sel1=$(".sel1"); var $sel2=$(".sel2"); var $sel3=$(".sel3"); //自动生成一个<option>元素 function createOption(value,text){ var $option=$("<option></option>"); $option.attr("value",value); $option.text(text); return $option; } //加载数据 function ajaxSelect($select,id){ //get请求 $.get(url,{"pid":id},function(data){ $select.html(option); for(var k in data ){ $select.append(createOption(data[k].id,data[k].name)); } },"json"); } //自动加载第一个下拉菜单 ajaxSelect($sel1,"0"); //选择第一个下拉菜单时加载第二个 $sel1.change(function(){ var id=$sel1.val(); if(id=="0"){ $sel2.html(option); $sel3.html(option); }else{ ajaxSelect($sel2,id); } }); //选择第二个下拉菜单时加载第三个 $sel2.change(function(){ var $id=$sel2.val(); if($id=="0"){ $sel3.html(option); }else{ ajaxSelect($sel3,$id); } }); });后台代码：<?php header("Content-Type:text/html; charset=utf-8"); //数据 $arr=array( //array(分类id,分类名，分类的父id) array("id"=>"1","name"=>"数码产品","pid"=>"0"), array("id"=>"2","name"=>"家电","pid"=>"0"), array("id"=>"3","name"=>"书籍","pid"=>"0"), array("id"=>"4","name"=>"服装","pid"=>"0"), array("id"=>"5","name"=>"手机","pid"=>"1"), array("id"=>"6","name"=>"笔记本","pid"=>"1"), array("id"=>"7","name"=>"平板电脑","pid"=>"1"), array("id"=>"8","name"=>"智能手机","pid"=>"5"), array("id"=>"9","name"=>"功能机","pid"=>"5"), array("id"=>"10","name"=>"电视机","pid"=>"2"), array("id"=>"11","name"=>"电冰箱","pid"=>"2"), array("id"=>"12","name"=>"智能电视","pid"=>"10"), array("id"=>"13","name"=>"编程书籍","pid"=>"3"), array("id"=>"14","name"=>"JavaScript","pid"=>"13"), ); //获取指定分类的商品 function getByPid($arr,$pid){ $result=array(); foreach($arr as $v){ if($v["pid"]==$pid){ $result[]=$v; } } return $result; } //获取请求参数 $pid=isset($_GET["pid"])?$_GET["pid"]:"0"; $result=getByPid($arr,$pid); //输出json数据 echo json_encode($result);?>相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：Ajax结合php怎么实现二级联动新手必看的Ajax技术组成与核心原理分析

前言第一部分　Ajax基本原理第1章　Web重生1.1　Web页面组件1.2　现代Web标准1.3　浏览器1.4　标准遵循1.5　欢迎来到w曲2.0第2章　从Web网站到Web应用程序2.1　转变2.2　基本的Web与Ajax设计模式2.3　应用程序环境2.4　开发人员2.5　Ajax不能做的事情第3章　服务器、数据库以及Web3.1　w曲服务器3.2　服务器端脚本3.3　数据库3.4　从关系数据库中存取数据3.5　连接到界面3.6　框架与语言3.7　框架有什么好处第4章　基础：编-写XML与JSON脚本4.1　XML4.2　JSON4.3　选择数据交换格式4.4　客户端框架简介4.5　简化开发第5章　模拟DOM5.1　理解DOM5.2　我们以前见过5.3　操纵DOM：元素、属性与对象5.4　更改样式5.5　DOMqb的事件5.6　用DOM填充表格5.7　innerHTML是魔鬼吗第6章　设计Ajax界面6.1　可用性6.2　功能性6.3　可视化6.4　可访问性6.5　Ajax界面第二部分　Ajax基础第7章　布局网站导航7.1　菜单7.2　选项卡7.3　导航辅助7.4　Ajax导航的问题7.5　总体布局第8章　表格与列表之乐8.1　不使用表格的布局8.2　可访问的表格8.3　表格排序8.4　带有样式的表格8.5　表格分页8.6　列表2.08.7　列表万金油第9章　不用框架的页面布局9.1　使用框架9.2　XHTML与框架9.3　Ajax与DIv的魔术9.4　页面布局第10章　导航栏与窗口10.1　警告框10.2　对窗口进行集成10.3　导航窗口10.4　工具提示10.5　必需的弹出框第11章　自定义客户端第12章　错误：（别具一格地）生存，还是毁灭第13章　这不是你老爸的动画第14章　在前往表单的路上发生的趣事第15章　数据验证：是客户，是服务器还是两者皆是第三部分　应用程序中的Ajax第16章　搜索：新领域第17章　Web服务介绍第18章　Web服务：API第19章　混搭第20章　用于企业通信需求第21章　无需插件的Internet游戏第四部分　打包第22章　模块化编码第23章　优化Ajax应用程序第五部分　附录

JS中的数组是弱类型的可以放任何类型（对象、基本类型），但是如果数组中放的是对象类型，传递到后台是显示的只能是对象字符串--[object Object],原因如下： 在后台接收的时候，只能用request来接收，request.getParameterValues()方法返回的是一个String[],所以，应该是在前台传输的时候调用了对象的toString()方法,那么如果依然想传递对象怎么办？但是可以使用JSON字符串来实现，在后台把JSON字符串解析成JAVA对象。 也许，你要说如果是复合对象怎么办，比如如下： public class Person { private String username; private String password; private Address addr; }Person对象里有个Address类型的addr属性，没关系，任何对象最终用到的属性值都是基本数据类型，只需要使用对应的包装类型parseInt、或者parseXXX解析即可。 实现： OK，原理就是这么个。先看JS如何写： var as = []; var temp = []; for ( var int = 0; int < 5; int++) { temp.push("{"k":"); temp.push(int); temp.push(","v":"); temp.push(int); temp.push("}"); as.push(temp.join("")); } //Jquery中的方法，具体参考Jquery API $.post( "servlet/AjaxServlet?m=putWarningRule",{"aa":as} );最终拼成的串就是如下样式，（只作举例） {"k":0,"v":0}后台接收，不讨论任何框架，只需要HttpServletRequest即可 String[] jsonArr = request.getParameterValues("aa[]");有一点需要注意，在js中传参的时候参数名叫"aa"，而在后台接收的时候却是"aa[]"，这里应该是Jquery做了转换，所以最好的方式就是在JS中就改为"aa[]"，之所以这里没有写"[]"是为了说明问题。可以使用如下方式打印request中的所有参数 Enumeration<String> names = request.getParameterNames(); while (names.hasMoreElements()) { String string = (String) names.nextElement(); System.out.println(string); }OK，至此为止，已经接收完毕，剩下的就是如何将一个JSON字符串转成一个POJO了。/** * 将对象转换为JSON格式的字符串 * @param obj * @return 返回JSON字符串 */ public static String toJSONAsString(Object obj){ try { return JSONMapper.toJSON(obj).render(false); } catch (MapperException e) { e.printStackTrace(); } return null; } @SuppressWarnings("unchecked") public static <T> T jsonToObject(String jsonStr, Class<T> targetClass) throws TokenStreamException, RecognitionException, MapperException{ JSONValue jv = new JSONParser(new StringReader(jsonStr)).nextValue(); return (T) JSONMapper.toJava(jv,targetClass); } //test public static void main(String[] args) throws Exception { Person p = new Person(); p.setK("a"); p.setV("v"); String json = toJSONAsString(p); Person np = jsonToObject(json,Person.class); System.out.println(np.getK()+"=="+np.getV()); }request取到值后，遍历数组，挨个转换 Person p = JSONUtils.jsonToObject(jsonArr[0], Person.class);Person类如下： public class Person { private String k; private String v; public String getK() { return k; } public void setK(String k) { this.k = k; } public String getV() { return v; } public void setV(String v) { this.v = v; } }有时候会出现问题，后台接收不到该值。解决办法： 设置jQuery.ajax的tradional属性$.ajax({ url: "/xxx", type: "GET", data: { "boxIds": boxIds, "boxType": 0, "time": new Date().getTime() }, traditional: true,//这里设置为true success: function(data) { //do sth... }});请求参数2这次参数不带”[]”了，并且后台可以成功接收到该数组。

1、纯html是无法直接读取txt文件内容的，这是很肯定的没有疑问的。html就是我们常说的静态文件，是无法读取处理服务器或本地机上的TXT文件的。2、读取txt文件内容可以用JS的ajax读取。ajax读取文本内容原理较为简单，重点基础是熟悉XMLHTTP对象的属性和方法。相关例子：<script>function dotxt(){var request=null;if(window.XMLHttpRequest){request=new XMLHttpRequest();}else if(window.ActiveXObject){request=new ActiveXObject("Microsoft.XMLHTTP");}if(request){request.open("GET","1.txt",true);"测试读取1.txt的内容request.onreadystatechange=function(){if(request.readyState===4){if (request.status == 200 || request.status == 0){document.getElementById("vv").innerHTML=request.responseText;}}}request.send(null);}else{alert("error");}} </script><input type="button" value="读取" onclick="dotxt();"/><div id="vv"></div>

本篇文章通过前台跨域请求处理以及后台跨域的数据处理方式介绍，详细分析了ajax跨域的问题，对此有需要的朋友学习下。最近一直在搞公众号前台开发，遇到了ajax跨域请求的问题，像地区的省-市-县三级联动、汽车品牌-车系-车款的三级联动查询等都需要调用外部接口(其他工程项目的接口)完成。下面就分享一下个人解决跨域请求的方案，当然是在后台程序猿大哥的帮助下，我才弄明白了其中的渊源，赶紧记录下来慢慢积累，也希望对大家能有所帮助，还请积极提出意见或建议。跨域请求需要借助后台代码接收callback回调函数，对json数据进行进一步处理；前台再用ajax请求向服务器发送callback参数，并指定数据格式为jsonp。一、后台对跨域请求进行处理1.CarBrandController.java(汽车品牌接口java文件)，这里列出的方法主要用来根据不同的level值查询对应的品牌、车系、车款，在这里对跨域请求做一个接收回调函数的处理，如果返回的callback为null,则不是跨域请求，不需要做特殊处理，直接打印json接口数据即可；如果返回的callback不为null，则表示跨域请求，这时要对json数据做一个特殊处理，即在json数据的外层加一对小括号包起来，具体请看HttpAdapter.java文件中的printlnJSONObject方法。public void json(HttpServletRequest request,HttpServletResponse response){ Map<String,Object>map=new HashMap<String, Object>(); String id = request.getParameter("id"); //接收ajax请求带过来的id String level = request.getParameter("level"); //接收ajax请求带过来的level String callback=request.getParameter("callback"); //接收ajax请求带过来的callback参数 if ("1".equals(level)) { //如果level是"1",则查询第一级目录内容 map.put("results", this.carBrandService.findByAttr(null, "first_letter asc")); //调用查询方法，结果放入map } else if ("2".equals(level)) { //如果level是"2",则查询第二级目录内容 map.put("results", this.carSerieService.findByAttr("parent_id="+id, "first_letter asc"));//调用查询方法，结果放入map } else if ("3".equals(level)) { //如果level是"3",则查询第三极目录内容 map.put("results", this.carModelYearService.findByAttr("parent_id="+id, "jian_pin desc"));//调用查询方法，结果放入map } map.put("level",level); if (null==callback) { //如果接收的callback值为null,则是不跨域的请求,输出json对象 HttpAdapter.printlnObject(response, map); }else{ //如果接收的callback值不为null,则是跨域请求，输出跨域的json对象 HttpAdapter.printlnJSONPObject(response, map, callback); } }2.HttpAdapter.java(输出对象的java文件)，printlnObject方法打印正常json字符串；printlnJSONObject方法对json字符串进行了特殊处理。/** * 打印对象 * @param response * @param object */ public static void printlnObject(HttpServletResponse response,Object object){ PrintWriter writer=getWriter(response); writer.println(JSON.toJSONString(object)); } /** * 打印跨域对象 * @param response * @param object */ public static void printlnJSONPObject(HttpServletResponse response,Object object,String callback){ PrintWriter writer=getWriter(response); writer.println(callback+"("+JSON.toJSONString(object)+")"); }二、前台ajax跨域请求数据写法1：向服务器发送一个参数callback=？，同时指定dataType为"jsonp"的格式，跨域请求时指定的数据格式必须是jsonp的形式。function loadData(obj,level,id,value){ $.ajax({ url:"http://192.168.1.106:8086/carBrand/json.html?level="+level+"&id="+id+"&callback=?", //将callback写在请求url后面作为参数携带 type:"GET", async:false, dataType:"jsonp", success:function(data){ console.log(data); //其他处理(动态添加数据元素) }); }写法2：callback不需要写在url中，但是要指定jsonp参数为"callback"，并给jsonpCallback参数一个值。function loadData(obj,level,id,value){ $.ajax({ url:"http://192.168.1.106:8086/carBrand/json.html?level="+level+"&id="+id, type:"GET", dataType:"jsonp", jsonp: "callback", //将callback写在jsonp里作为参数连同请求一起发送 jsonpCallback:"jsonpCallback1", success:function(data){ console.log(data); }); }以上两种写法的含义是一样的，只是写法不同罢了。接下来补充一下jsonp的工作原理。三、jsonp跨域的原理解析jsonp的最基本的原理是:动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。jsonCallback 函数jsonp1236827957501(....): 是浏览器客户端注册的，获取跨域服务器上的json数据后，回调的函数Jsonp原理：首先在客户端注册一个callback (如:"jsoncallback"), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意：服务端得到callback的数值后，要用jsonp1236827957501(......)把将要输出的json内容包括起来，此时，服务器生成 json 数据才能被客户端正确接收。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 "jsoncallback"的值 jsonp1236827957501 .最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时javascript文档数据,作为参数，传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.（动态执行回调函数）可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.上面是我整理给大家的，希望今后会对大家有帮助。相关文章：有关Express中log4js实际用法使用NodeJS如何实现WebSocket功能使用JS获得节点元素的方法

1. ajax请求的页面只要返回你需要的东西，比如username, 如果index.php页面返回很多东西，你可以另外写个index2.php，只返回需要的。2.ajax请求后，得到数据，需要写js方法处理返回的数据，就是所谓的回调函数，在这个函数里，就是你要处理的东西，比如把返回结果填充到username 字段，或password字段，更具体的你要上网了解下AJAX的工作原理。 其实很简单的。

第一步：在你的Action中创建一个json数据public class AjaxAction extends ActionSupport{ /** * */private static final long serialVersionUID = 1L; private String result; public String getResult() { return result; } public void setResult(String result) { this.result = result; }public String getjson() { JSONObject json = new JSONObject(); json.put("name","张三"); json.put("password","123456"); result=json.toString(); return SUCCESS;}第二步：编写struts.xml文件中的内容<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.5//EN" "http://struts.apache.org/dtds/struts-2.5.dtd"> <struts> <!-- 设置开发者模式 修改action中的名字可以不用重启服务器 --> <constant name="struts.devMode" value="true"></constant> <!-- 只有在后缀中有（.do）的才经过，这个value可以自己修改 --> <constant name="struts.action.extension" value="do"></constant> <!-- 开启动态方法调用 --> <constant name="struts.enable.DynamicMethodInvocation" value="true"/> <package name="default" extends="json-default" namespace=""> <action name="ajax" class="com.action.AjaxAction" method="getjson"> <result name="success">/ajaxjson.jsp</result> <result type="json" ><!-- 这里指定将被Struts2序列化的属性，该属性在action中必须有对应的getter方法 --> <param name="root">result</param> </result> </action> </package> </struts>凡是使用Struts2序列化对象到JSON的action，所在的package必须继承自json-default，注意，这里唯一的result，没有指定name属性。parm设置name=“root”表示局部刷新，返回根目录页面.第三步：首先先了解Ajax的原理：这是用jQuery做的，需要引 jsfunction testCheck(num){ $.ajax({ type:"post",//提交方式url:"TestCheckServlet",//提交地址async:true,//是否异步请求dataType:"html",//返回类型data:{"num":num},//传过去的值success:function(data,textStatus){//成功执行的方法var json=eval("("+data+")");//将传过来的数据转json，也可以传过来就是json数据免得麻烦转 alert(json.name); }, error:function(){//失败执行的方法alert("error"); } }) }思路：1、在input的onblur事件中进行验证。2、通过ajax发送手机号给后台Servlet。3、Servlet对手机号进行数据库查询，返回是否存在的文字给ajax。4、ajax收到返回文字后，显示到标签上。总结：Ajax能够让浏览器和服务器进行交互，并且在不刷新页面的情况下对网页内容进行更新，大大提高了用户体验，通过Ajax技术能够构建交互性极强的Web应用程序。

1. ajax请求的页面只要返回你需要的东西，比如username, 如果index.php页面返回很多东西，你可以另外写个index2.php，只返回需要的。2.ajax请求后，得到数据，需要写js方法处理返回的数据，就是所谓的回调函数，在这个函数里，就是你要处理的东西，比如把返回结果填充到username 字段，或password字段，更具体的你要上网了解下AJAX的工作原理。 其实很简单的。

这次给大家带来怎么用AJAX实现瀑布流，用AJAX实现瀑布流的注意事项有哪些，下面就是实战案例，一起来看一下。瀑布流是当前一种比较流行的网站界面布局方式，参差不齐的多栏布局以及到达底部自动加载的方式，使网站在视觉和用户体验上都能得到较大的提升。最早使用此布局的是国外的图片网站Pinterest，之后国内的一些图片网站也开始使用瀑布流布局，包括和Pinterest类似的花瓣网、图片社区lofter、美丽说、蘑菇街等等。瀑布流在布局上对于大多数人来说应该是很简单的，比较只有几列而已。瀑布流最主要的还是数据的异步加载。首先说一下这次实例所用的瀑布流式方法。瀑布流布局实现的方法很多，具体可以自行百度，此处不再赘述。本文中瀑布流实现方法为四列布局（li*4），每个图片为一个盒子（p>img+p），从后台读取数据后赋值给盒子中的元素，判定此时高度最小的列（li），然后将盒子添加到对应的列（li），之后进行下一次判定，以此类推，直至本页所有数据加载完成。代码部分：html+css<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ width: 1200px; margin: 0 auto; } ul li{ float: left; width: 250px; list-style: none; margin: 20px; } ul li p{ width: 250px; margin-bottom: 20px; padding: 10px; box-sizing: border-box; border-radius: 5px; box-shadow: 2px 2px 10px #919B9C; } ul li img{ width: 100%; margin-bottom: 10px; } ul li p{ font-family: "microsoft yahei"; font-size: 14px; } </style> <script src="ajax.js" type="text/javascript" charset="utf-8"></script> <script src="pubuliu.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul id="ul1"> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>javascript部分：ajax部分和实现部分/** * * @param {Object} method get和post方式 * @param {Object} url 文件路径 * @param {Object} data 页码 * @param {Object} success 成功的函数 */ function ajax(method, url, data, success) { var xhr = null; try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } if (method == "get" && data) { url += "?" + data; } xhr.open(method,url,true); if (method == "get") { xhr.send(); } else { xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); xhr.send(data); } xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { if ( xhr.status == 200 ) { success && success(xhr.responseText); console.log(xhr.responseText); } else { alert("出错了,Err：" + xhr.status); } } } } ajax部分是在之前所写的Ajax工作原理以及函数的简单封装上修改而来，理解那个之后看这个基本没难度。这个相对那个来说多了一个data参数，data是用来读取数据的页码。window.onload = function() { //获取界面节点 var ul = document.getElementById("ul1"); var li = document.getElementsByTagName("li"); var liLen = li.length; var page = 1; var bool = false; //调用接口获取数据 loadPage();//首次加载 /** * 加载页面的函数 */ function loadPage(){ ajax("get", "getPics.php", "cpage="+page, function(data) { //将数据库中获取的数据转换成数组形式，这里要根据数据库中的数据形式来写，这里我获取到的是json形式 var data = JSON.parse(data); //将数据写入到p中 for(var i = 0; i < data.length; i++) { var index = getShort(li);//查找最短的li //创建新的节点：p>img+p var p = document.createElement("p"); var img = document.createElement("img"); img.src = data[i].preview;//img获取图片地址 img.alt = "等着吧..." //根据宽高比计算img的高，为了防止未加载时高度太低影响最短Li的判断 img.style.height = data[i].height * (230 / data[i].width) + "px"; p.appendChild(img); var p = document.createElement("p"); p.innerHTML = data[i].title;//p获取图片标题 p.appendChild(p); //加入到最短的li中 li[index].appendChild(p); } bool = true;//加载完成设置开关，用于后面判断是否加载下一页 }); } window.onscroll = function (){ var index = getShort(li); var minLi = li[index]; var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; if(minLi.offsetHeight+minLi.offsetTop<scrollTop+document.documentElement.clientHeight){ //开关为开，即上一页加载完成，才能开始加载 if(bool){ bool = false; page++; loadPage(); } } } } /** * 获取数组中高度最小的索引 * @param {Object} li 数组 */ function getShort(li) { var index = 0; var liHeight = li[index].offsetHeight; for(var i = 0; i < li.length; i++) { if(li[i].offsetHeight < liHeight) { index = i; liHeight = li[i].offsetHeight; } } return index; }这部分的功能主要是动态的将生成的p写入到页面中，其中包含对盒子样式的修改和数据的写入，数据通过ajax函数从服务器端获取。需要注意的是：该实例的运行依赖于服务器，所以需要在本地搭建一个简单的服务器，快速搭建可以使用WampService。下面是我们数据来源的php代码：<?php header("Content-type:text/html; charset="utf-8""); /* API: getPics.php 参数 cpage : 获取数据的页数 */ $cpage = isset($_GET["cpage"]) ? $_GET["cpage"] : 1; $url = "http://www.wookmark.com/api/json/popular?page=" . $cpage; $content = file_get_contents($url); $content = iconv("gbk", "utf-8", $content); echo $content;相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：Ajax+PHP的数据交互实现Ajax的循环如何实现

比如服务器上有张表或者listid name sex1 张三 男2 李四 女3 王五 男你首先在后台代码中把这个表处理成为JSON格式然后用Response.write的方法输出来，比如这样[{id:1,name:"张三",sex:"男"},{id:2,name:"李四",sex:"女"},{id:3,name:"王五",sex:"男"}]JSON是用于在JS中描述实体对象的一种方式，具体关于JSON的知识可以看w3school.com.cn上的相关内容，我这儿就不给你细讲了，很简单，我只说做法：为了方便使用，你需要在你的页面中引用jQuery库，我不知道你用什么语言做的后台程序，原理一样$.ajax({ url:"这里换成你写好的用于把表转换成JSON的后台处理文件地址，比如a.aspx?参数", type:"POST",//这里是AJAX请求的方式 dataType:"JSON",//如果你回发的内容是JSON格式的就用这个，否则用Text或其他 data:{ 参数1:值, 参数2:值, ...... 参数n:值 },//要发送的参数，如果无参数可以不写此项 success:function(data) { //此处写入发送成功后要处理的代码，而参数里的这个data，就是请求成功后返回来的上面那个格式的JSON，你可以用data[i]的值来取其中一行，如取张三的数据就是 data[0].name，就取出了张三的name属性 所以你可以在这里用循环去处理data，然后将结果用document.write的方式输出来就完成了。 }, error:function(XMLHttpRequest,Error,F) { //出错后可以在这里给出提示，Error参数表示错误信息 }}); 还有弄不清楚的地方可以继续和我探讨。

ajax一般用xml，字符串，json三种方式用json，一个结构清晰，二是容易转成对象调用，你可以谷歌一下json格式的好处。。自己查询的更加清晰深刻。

http://blog.csdn.net/u010861514/article/details/46238033jsonp就是ajax，区别就是一个是跨域一个不跨域，还有接收参数形式不一样！

一、JS原生Ajaxajax：一种请求数据的方式，不需要刷新整个页面；ajax的技术核心是 XMLHttpRequest 对象；ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据；下面简单封装一个函数，之后稍作解释 ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 dataType: "json", success: function (response, xml) { // 此处放成功后执行的代码 }, fail: function (status) { // 此处放失败后执行的代码 } }); function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"; var params = formatParams(options.data); //创建 - 非IE6 - 第一步 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { //IE6及其以下版本浏览器 var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //接收 - 第三步 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { var status = xhr.status; if (status >= 200 && status < 300) { options.success && options.success(xhr.responseText, xhr.responseXML); } else { options.fail && options.fail(status); } } } //连接 和 发送 - 第二步 if (options.type == "GET") { xhr.open("GET", options.url + "?" + params, true); xhr.send(null); } else if (options.type == "POST") { xhr.open("POST", options.url, true); //设置表单提交时的内容类型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(params); } } //格式化参数 function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); } arr.push(("v=" + Math.random()).replace(".")); return arr.join("&"); }1、创建1.1、IE7及其以上版本中支持原生的 XHR 对象，因此可以直接用： var oAjax = new XMLHttpRequest();1.2、IE6及其之前的版本中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。有的书中细化了IE中此类对象的三种不同版本，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MSXML2.XMLHttp.6.0；个人感觉太麻烦，可以直接使用下面的语句创建： var oAjax=new ActiveXObject("Microsoft.XMLHTTP");2、连接和发送2.1、open()函数的三个参数：请求方式、请求地址、是否异步请求(同步请求的情况极少，至今还没用到过)；2.2、GET 请求方式是通过URL参数将数据提交到服务器的，POST则是通过将数据作为 send 的参数提交到服务器；2.3、POST 请求中，在发送数据之前，要设置表单提交的内容类型；2.4、提交到服务器的参数必须经过 encodeURIComponent() 方法进行编码，实际上在参数列表”key=value”的形式中，key 和 value 都需要进行编码，因为会包含特殊字符。每次请求的时候都会在参数列表中拼入一个 “v=xx” 的字符串，这样是为了拒绝缓存，每次都直接请求到服务器上。 encodeURI() ：用于整个 URI 的编码，不会对本身属于 URI 的特殊字符进行编码，如冒号、正斜杠、问号和井号；其对应的解码函数 decodeURI()； encodeURIComponent() ：用于对 URI 中的某一部分进行编码，会对它发现的任何非标准字符进行编码；其对应的解码函数 decodeURIComponent()；3、接收3.1、接收到响应后，响应的数据会自动填充XHR对象，相关属性如下 responseText：响应返回的主体内容，为字符串类型； responseXML：如果响应的内容类型是 "text/xml" 或 "application/xml"，这个属性中将保存着相应的xml 数据，是 XML 对应的 document 类型； status：响应的HTTP状态码； statusText：HTTP状态的说明；3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段，这个属性的值如下 0-未初始化，尚未调用open()方法； 1-启动，调用了open()方法，未调用send()方法； 2-发送，已经调用了send()方法，未接收到响应； 3-接收，已经接收到部分响应数据； 4-完成，已经接收到全部响应数据；只要 readyState 的值变化，就会调用 readystatechange 事件，(其实为了逻辑上通顺，可以把readystatechange放到send之后，因为send时请求服务器，会进行网络通信，需要时间，在send之后指定readystatechange事件处理程序也是可以的，我一般都是这样用，但为了规范和跨浏览器兼容性，还是在open之前进行指定吧)。3.3、在readystatechange事件中，先判断响应是否接收完成，然后判断服务器是否成功处理请求，xhr.status 是状态码，状态码以2开头的都是成功，304表示从缓存中获取，上面的代码在每次请求的时候都加入了随机数，所以不会从缓存中取值，故该状态不需判断。4、ajax请求是不能跨域的！二、JSONPJSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特点，由其 src 属性发送请求到服务器，服务器返回 js 代码，网页端接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。JSONP由两部分组成：回调函数和数据，回调函数一般是由网页端控制，作为参数发往服务器端，服务器端把该函数和数据拼成字符串返回。比如网页端创建一个 script 标签，并给其 src 赋值为 http://www.superfiresun.com/json/?callback=process， 此时网页端就发起一个请求。服务端将要返回的数据拼好最为函数的参数传入，服务端返回的数据格式类似”process({‘name":"superfiresun"})”，网页端接收到了响应值，因为请求者是 script，所以相当于直接调用 process 方法，并且传入了一个参数。单看响应返回的数据，JSONP 比 ajax 方式就多了一个回调函数。 function jsonp(options) { options = options || {}; if (!options.url || !options.callback) { throw new Error("参数不合法"); } //创建 script 标签并加入到页面中 var callbackName = ("jsonp_" + Math.random()).replace(".", ""); var oHead = document.getElementsByTagName("head")[0]; options.data[options.callback] = callbackName; var params = formatParams(options.data); var oS = document.createElement("script"); oHead.appendChild(oS); //创建jsonp回调函数 window[callbackName] = function (json) { oHead.removeChild(oS); clearTimeout(oS.timer); window[callbackName] = null; options.success && options.success(json); }; //发送请求 oS.src = options.url + "?" + params; //超时处理 if (options.time) { oS.timer = setTimeout(function () { window[callbackName] = null; oHead.removeChild(oS); options.fail && options.fail({ message: "超时" }); }, time); } }; //格式化参数 function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[i])); } return arr.join("&"); }1、因为 script 标签的 src 属性只在第一次设置的时候起作用，导致 script 标签没法重用，所以每次完成操作之后要移除；2、JSONP这种请求方式中，参数依旧需要编码；3、如果不设置超时，就无法得知此次请求是成功还是失败；三、模仿JQuery中的ready()事件1、DOMContentLoaded事件，在DOM树加载完成之后立即执行，始终会在load之前执行。 IE9+、FF、Chrome、Safari3.1+和Opera9+都支持该事件。 对于不支持该事件的浏览器，可以使用如下代码：setTimeout(function(){// 代码块}, 0) ; DOMContentLoaded 事件只能通过 DOM2 级方式添加，即采用addEventListener()/attachEvent() 方式添加才能够使用。事件对象不会提供任何额外信息。2、readystatechange事件 IE为DOM文档中的某些部分(区别于 XHR 对象的 readystatechange 事件)提供了该事件，这个事件的目的是提供与文档或元素的加载状态有关的信息，但这个事件的行为有时候也很难预料。支持该事件的对象都有一个readyState属性，注意，不是 event 事件对象。IE、Firefox4+和Opera 支持该事件。readyState属性的值如下： “uninitialized” - 未初始化：对象存在但尚未初始化； “loading” - 正在加载：对象正在加载数据； “loaded” - 加载完毕，对象加载数据完毕； “interactive” - 交互：可以操作对象了，但还没有完全加载； “complete” - 完成：对象已经加载完成；2.1、并非所有的对象都会经历readyState的这几个阶段，如果这个阶段不适用某个对象，则该对象完全可能跳过该阶段，并没有规定哪个阶段适用于哪个对象。这意味着 readystatechange 事件经常会少于4次，相对应的 readyState 属性值也不是连续的。2.2、对于 document 而言，interactive 和 complete 阶段会在于 DOMContentLoaded 大致相同的时刻触发 readystatechange 事件；load 事件和 readystatechange 事件的触发顺序会因页面的外部资源的多少而变化，也就是说，readystatechange 事件并不会一直在 load 事件之前执行。外部资源越多，对 readystatechange 事件就越有利。interactive 和 complete 的顺序也是不一致的，谁都有可能先执行，引用的外部资源越多，对交互阶段越有利。所以为了尽可能早的执行代码，两个状态要同时判断。3、doScroll IE5.5+支持，当页面中有滚动条时，可以用 doScroll("right")/doScroll("down") 等来移动滚动条，这个方法只有等DOM加载完成以后才能用，所以在IE低版本浏览器中可以通过这个属性判断 DOM 结构是否加载完成。介绍这个属性主要是模仿 jquery 中的解决方案。function ready(readyFn) { //非IE浏览器 if (document.addEventListener) { document.addEventListener("DOMContentLoaded", function () { readyFn && readyFn(); }, false); } else { //方案1和2 哪个快用哪一个 var bReady = false; //方案1 document.attachEvent("onreadystatechange", function () { if (bReady) { return; } if (document.readyState == "complete" || document.readyState == "interactive") { bReady = true; readyFn && readyFn(); }; }); //方案2 //jquery也会担心doScroll会在iframe内失效，此处是判断当前页是否被放在了iframe里 if (!window.frameElement) { setTimeout(checkDoScroll, 1); } function checkDoScroll() { try { document.documentElement.doScroll("left"); if (bReady) { return; } bReady = true; readyFn && readyFn(); } catch (e) { // 不断检查 doScroll 是否可用 - DOM结构是否加载完成 setTimeout(checkDoScroll, 1); } }; } };注：setTimeout(checkDoScroll, 1); 目的是让浏览器尽快执行 checkDoScroll 函数，间隔时间设置为 1ms，对当下的浏览器来说是不太可能的。每个浏览器都有自己默认的最小间隔时间，即使时间设置为最小间隔时间，也只是代表隔这些时间过去之后，JavaScript 会把 checkDoScroll 加入到执行队列中，如果此时 JavaScript 进程空闲，则会立即执行该代码。

我们都知道， ajax目前已经是一门很普遍的技术了，本文主要介绍了原生JS中的ajax的实现原理以及XMLHttpRequest及promise的概念和流程。Ajax是目前很普遍的一门技术，也是很值得探讨和研究的一门技术。本文将针对Ajax的发展过程并结合其在不同库框架中的使用方式来和大家分享下Ajax的那些新老语法。Ajax简介Ajax全称为“Asynchronous Javascript And XML”， 即“异步JavaScript和XML”的意思。通过Ajax我们可以向服务器发送请，在不阻塞页面的情况下进行数据交互，也可以理解为异步数据传输。在Ajax的帮助下我们的网页只需局部刷新即可更新数据的显示，减少了不必要的数据量，大大提高了用户体验，缩短了用户等待的时间，使得web应用程序更小、更快，更友好。当然以上都是司空见惯的内容了，作为一名合格的开发人员基本都再熟悉不过了，这里只为那些刚入门的新手做一个简单的介绍。原生Ajax基本上所有现代的浏览器都支持原生Ajax的功能，下面就来详细介绍下利用原生JS我们怎样来发起和处理Ajax请求。获取XMLHttpRequest对象var xhr = new XMLHttpRequest(); // 获取浏览器内置的XMLHttpRequest对象如果你的项目应用不考虑低版本IE，那么可以直接用上面的方法，所有现代浏览器 (Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。如果需要兼容老版本IE（IE5、IE6），那么可以使用 ActiveX 对象：var xhr;if (window.XMLHttpRequest) { xhr=new XMLHttpRequest();} else if (window.ActiveXObject) { // 兼容老版本浏览器 xhr=new ActiveXObject("Microsoft.XMLHTTP");}参数配置有了XMLHttpRequest对象，我们还需要配置一些请求的参数信息来完成数据交互，利用open方法即可：var xhr;if (window.XMLHttpRequest) { xhr=new XMLHttpRequest();} else if (window.ActiveXObject) { xhr=new ActiveXObject("Microsoft.XMLHTTP");}if (xhr) { xhr.open("GET", "/test/", true); // 以GET请求的方式向"/test/"路径发送异步请求}open方法为我们创建了一个新的http请求，其中第一个参数为请求方式，一般为"GET"或"POST"；第二个参数为请求url；第三个参数为是否异步，默认为true。发送请求配置完了基本参数信息，我们直接调用send方法发送请求，代码如下：var xhr;if (window.XMLHttpRequest) { xhr=new XMLHttpRequest();} else if (window.ActiveXObject) { xhr=new ActiveXObject("Microsoft.XMLHTTP");}if (xhr) { xhr.open("GET", "/test/", true); xhr.send(); // 调用send方法发送请求}这里需要注意的是如果使用GET方法传递参数，我们可以直接将参数放在url后面，比如"/test/?name=luozh&size=12";如果使用POST方法，那么我们的参数需要写在send方法里，如：xhr.open("POST", "/test/", true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 将请求头设置为表单方式提交xhr.send("name=luozh&size=12");最终会以Form Data的形式传递：如果不设置请求头，原生Ajax会默认使用Content-Type是"text/plain;charset=UTF-8"的方式发送数据,如果按照上面的参数书写形式，我们最终传输的形式这样的：显然这并不是服务器期望的数据格式，我们可以这样写：xhr.open("POST", "/test/", true);xhr.send(JSON.stringify({name: "luozh", size: 12}));这样我们可以直接传递JSON字符串给后台处理，当然后台也许进行相应配置。监测状态发送完Ajax请求之后，我们需要针对服务器返回的状态进行监测并进行相应的处理，这里我们需要使用onreadystatechange方法，代码如下：var xhr;if (window.XMLHttpRequest) { xhr=new XMLHttpRequest();} else if (window.ActiveXObject) { xhr=new ActiveXObject("Microsoft.XMLHTTP");}if (xhr) { xhr.open("GET", "/test/", true); // 以GET请求的方式向"/test/"路径发送异步请求 xhr.send(); xhr.onreadystatechange = function () { // 利用onreadystatechange监测状态 if (xhr.readyState === 4) { // readyState为4表示请求响应完成 if (xhr.status === 200) { // status为200表示请求成功 console.log("执行成功"); } else { console.log("执行出错"); } } }}上面我们利用onreadystatechange监测状态，并在内部利用readyState获取当前的状态。readyState一共有5个阶段，当其为4时表示响应内容解析完成，可以在客户端调用了。当readyState为4时，我们又通过status来获取状态码，状态码为200时执行成功代码，否则执行出错代码。当然我们可以用onload来代替onreadystatechange等于4的情况，因为onload只在状态为4的时候才被调用，代码如下xhr.onload = function () { // 调用onload if (xhr.status === 200) { // status为200表示请求成功 console.log("执行成功"); } else { console.log("执行出错"); } }然而需要注意的是，IE对onload这个属性的支持并不友好。 除了onload还有:1.onloadstart2.onprogress3.onabort4.ontimeout5.onerror6.onloadend等事件，有兴趣的同学可以亲自去实践它们的用处。以上便是原生Ajax请求数据的常见代码。其他库框架中的AjaxjQuery中的AjaxjQuery作为一个使用人数最多的库，其Ajax很好的封装了原生Ajax的代码，在兼容性和易用性方面都做了很大的提高，让Ajax的调用变得非常简单。下面便是一段简单的jQuery的Ajax代码：$.ajax({ method: "GET", // 1.9.0本版前用"type" url: "/test/", dataType: "json"}).done(function() { console.log("执行成功");}).fail(function() { console.log("执行出错");})与原生Ajax不同的是，jQuery中默认的Content-type是"application/x-www-form-urlencoded; charset=UTF-8", 想了解更多的jQuery Ajax的信息可以移步官方文档：http://api.jquery.com/jquery.ajax/Vue.js中的AjaxVue.js作为目前热门的前端框架，其实其本身并不包含Ajax功能，而是通过插件的形式额外需要在项目中引用，其官方推荐Ajax插件为vue-resource，下面便是vue-resource的请求代码：Vue.http.get("/test/").then((response) => { console.log("执行成功");}, (response) => { console.log("执行出错");});3.Angular.js中的Ajax这里Angular.js中的Ajax主要指Angular的1.×版本，因为Angular2目前还不建议在生产环境中使用。var myApp = angular.module("myApp",[]);var myCtrl = myApp.controller("myCtrl",["$scope","$http",function($scope, $http){ $http({ method: "GET", url: "/test/", headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"} }).success(function (data) { console.log("执行成功"); }).error(function () { console.log("执行出错"); });}]);在Angular中，我们需要在控制器上注册一个$http的事件，然后才能在内部执行Ajax。Angular的Ajax默认的Content-type是"application/json;charset=UTF-8"，所以如果想用表单的方式提交还需设置下headers属性。4.React中的Ajax在React中我比较推荐使用fetch来请求数据，当然其不仅适用于React，在任何一种框架如上面的Vue、Angular中都可以使用，因为其已经被目前主流浏览器所支持，至于其主要功能和用法，我在下面会做下讲解。Fetch APIFetch API 是基于 Promise 设计，由于Promise的浏览器兼容性问题及Fetch API本身的兼容问题，一些浏览器暂时不支持Fetch API，浏览器兼容图如下：当然我们可以通过使用一些插件来解决兼容性问题，比如：fetch-polyfill、es6-promise、fetch-ie8等。使用Fetch我们可以非常便捷的编写Ajax请求，我们用原生的XMLHttpRequst对象和Fetch来比较一下：XMLHttpRequst API// XMLHttpRequst APIvar xhr = new XMLHttpRequest();xhr.open("GET", "/test/", true);xhr.onload = function() { console.log("执行成功");};xhr.onerror = function() { console.log("执行出错");};xhr.send();Fetch API fetch("/test/").then(function(response) { return response.json();}).then(function(data) { console.log("执行成功");}).catch(function(e) { console.log("执行出错");});可以看出使用Fetch后我们的代码更加简洁和语义化，链式调用的方式也使其更加流畅和清晰。随着浏览器内核的不断完善，今后的XMLHttpRequest会逐渐被Fetch替代。关于Fetch的详细介绍可以移步：https://segmentfault.com/a/1190000003810652跨域Ajax介绍了各种各样的Ajax API，我们不能避免的一个重要问题就是跨域，这里重点讲解下Ajax跨域的处理方式。处理Ajax跨域问题主要有以下4种方式：1.利用iframe2.利用JSONP3.利用代理4.利用HTML5提供的XMLHttpRequest Level2第1和第2种方式大家应该都非常熟悉，都属于前端的活，这里就不做介绍了，这里主要介绍第3和第4种方式。利用代理的方式可以这样理解：通过在同域名下的web服务器端创建一个代理：北京服务器(域名:www.beijing.com)上海服务器(域名：www.shanghai.com)比如在北京的web服务器的后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shanghai.com/services.php)的服务，然后再把访问结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。利用XMLHttpRequest Level2的方式需要后台将请求头进行相应配置：// php语法header("Access-Control-Allow-Origin: *");header("Access-Control-Allow-Methods: GET,POST");以上的*号可以替换成允许访问的域名，*表示所有域名都可以访问。由此可见，第3和第4种方式主要是后台的活，前端只需调用就可以。总结无论Ajax的语法多么多变，无论库和框架如何封装Ajax，其只是一种实现异步数据交互的工具，我们只需理解原生JS中Ajax的实现原理，了解XMLHttpRequest及promise的概念和流程，便可以轻松的在数据异步交互的时代游刃有余。相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！相关阅读：CSS的文本字体颜色如何设置css里的font文字怎么设置 Css3中的transform 渐变属性怎么使用

ajax.process,貌似只有jquery的xhr对象才有

啊嘎嘎谁是哥哥哥哥

那个不是 磁盘文件的地址 ，是一个网页地址 ，ajax异步提交xmlhttp.open("GET","/ajax/test1.txt",true);的三个参数 第一个是get 方式还是 post 方式 第二个是 提交到的地址 ，第三个参数 是同步提交还是异步提交， 你在写一个servlet 或者 action 提交过去 ，.xmlhttp.responseText是到指定url 运行后 返回的 值， 你再多看一下ajax的原理

Overriew： onReadyStateChange被回调函数赋值，则能实现异步调用，回调函数直接操作DOM，则能实现局部刷新。那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢？状态如何change了呢（观察者模式）？则是通过客户端对服务的状态询问（定期轮询）所实现的。详解：1. XMLHttpRequest 负责与服务器端的通讯，其内部有很多重要的属性：readyStatus=4，status=200等等。当XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问（类似于客户端会轮询服务器的返回状态，仍然是http短连接,并非长连接的服务器端push）请求状态，如果一切已经就绪（status=200），那么就执行需要的操作。操作一般就是直接操作DOM，所以AJAX能做到所谓的“无刷新”用户体验。document.getElementById("user1").innerHTML = "数据正在加载..."; if (xmlhttp.status == 200) { document.write(xmlhttp.responseText); }2. 那么在AJAX客户端如何做到的异步呢？实际上就是Javascript的回调函数起的作用提供一个回调JavaScript函数，一旦服务器响应可用，该函数就被执行业务函数：function castVote(rank) { var url = "/ajax-demo/static-article-ranking.html"; var callback = processAjaxResponse; executeXhr(callback, url);}需要异步通讯的函数： function executeXhr(callback, url) { // branch for native XMLHttpRequest object if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = callback; req.open("GET", url, true); req.send()(null); } // branch for IE/Windows ActiveX version else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = callback; req.open("GET", url, true); req.send()(); } }}req.onreadystatechange = callbackreq.open("GET", url, true)第一行定义了JavaScript回调函数，一旦响应就绪它就自动执行，而req.open()方法中所指定的“true”标志说明想要异步执行该请求。一旦服务器处理完XmlHttpRequest并返回给浏览器，使用req.onreadystatechange指派所设置的回调方法将被自动调用。回调函数：function processAjaxResponse() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById("user1").innerHTML = req.responseText; } else { alert("There was a problem retrieving the XML data:" + req.statusText); } }}以上这篇AJAX的原理—如何做到异步和局部刷新【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

1、这是Ajax异步Request:<script type="text/javascript"><!-- var request = false; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = false; } } } if (!request) alert("Error initializing XMLHttpRequest!"); //获取信息 function GetInfo() { var url = "test.aspx?userName=" + document.getElementById("txtName").value; request.open("GET", url, true); request.onreadystatechange = updatePageTime; request.send(null); } //更新页面 function updatePageTime() { if (request.readyState == 4) { if (request.status == 200) { var response = request.responseText; document.getElementById("txtLoginName").value = response; } else if (request.status == 404) { alert("Requested URL is not found."); } else if (request.status == 403) { alert("Access denied."); } else alert("status is " + request.status); } } // --></script> <form id="form1" runat="server"> <input id="txtName" onchange="GetInfo()" type="text" /> <input id="txtLoginName" type="text" /> </form> 2、下面是我对你的题目的自己的想法{ action : "online_state", params : { state : fld.value } }这种方式叫字面量写法，也可以叫json写法原理是大括号代表对象，中括号代表集合，大括号里面用字符串或者对象当做属性，加冒号来表示赋值由于JavaScript若类型语言的特性，可以把一个大括号包住的对象赋值给一个属性举例翻译成类写法就是a = 1;b = 2;同理}翻译一下就是a = 1;b = { aa=2; bb=3;}希望对你有帮助！

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。AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快 的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。Ajax应用程序的优势在于：1. 通过异步模式，提升了用户体验2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。Ajax的工作原理Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不 阻塞用户。在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。 提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在某购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载整 个页面的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。 直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

一般最原始的作法就是在客户端搞个定时器一直向后台请求，而ajax的长轮询与一般的http连接不一样，它发送的是长连接，比如说你发过去一个连接，它并不急于给你返回过来请求，而是等到后台有动作的时候才有相应，这样就减少了客户端的压力，现在很多地方都用到这种技术，比如说百度，新浪微博，比较成熟的框架有pushlet，另外servlet3.0也增加了异步的功能，也能很好的解决这个问题，HTML5在将来，这个问题就更简单了！如果你要研究，建议你深入的了解一下HTTP协议的内部工作原理，了解一下服务器的实现，希望能帮到你。

前台必须要定义时比较吧

问者的问题在于对AJAX异步读取数据内容的基础原理还不是十分清晰，下面先解释一下：AJAX通信中，A从B页面取值，实际上是通过A页面不动，然后通过在后台运行B页面。而A页面向B页面取值，实际上是取得B页面输出的页面内容。是B页面运行结束后的内容。例如：注册时，验证用户名称是否已被注册。1、输入框输入内容，然后促发JS代码。2、js代码通过参数形式（post，get方式随便）传递到B页面，而B页面就会执行。这里假设，如果是可以注册，页面输出1，不可以注册，输出0。3、在执行AJAX时，A页面的JS是可以设置读取返回数据的内容，是HTML，还是TEXT。也就是说，返回的内容实际上是B页的完整的html代码。即，如果是设置读取HTML的时候，返回的数据就是B页面的HTML代码，包含<html><body></body></html>等的内容；如果是设置读取TEXT的话，那么就是我们打开这个B页时，会见到的内容，1或者0；因此，对于你的问题，很难去回答。具体问题具体分析是比较好的。而AJAX的使用方式，建议是使用jquery。因为方便简单实用。

data : {aa:""},

<html> <head> <script type="text/javascript"> function $(tagId){ return document.getElementById(tagId); } function checkUserName(){ var name = $("nameId").value; var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHttp"); } xhr.open("POST","/Ajax/userNameCheckServlet"); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("userNeme="+name); xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ var ret = xhr.responseText; var span = $("msgId"); //innerHTML作用 方便往标签中增加内容 span.innerHTML = "<font color="red">"+ret+"</font>" ; } } } </script> </head> <body> <table> <tr> <td>用户名:<input type="text" id="nameId" onblur="checkUserName();"/> <span id="msgId"></span></td> </tr> <tr> <td>密　码:<input type="password"/></td> </tr> <tr> <td align="center"><input type="button" value="确定"/></td> </tr> </table> </body></html>然后在servlet里判断是否用户名存在:package com.wsw.day01;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class UserNameCheckServlet extends HttpServlet{ @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("gbk"); response.setCharacterEncoding("gbk"); String userName = request.getParameter("userNeme"); System.out.println(userName); PrintWriter out = response.getWriter(); if("wsw".equals(userName)){ out.print("is ok"); }else{ out.print("is false"); } out.flush(); }}这里是简单的判断,实际应用的时候要连数据库,查询判断,反正都是这个原理

我觉得原因是：

亲，后端写的不对，用out对象像浏览器写数据。不然拿不到！

ajax传递数据有很多种形式，因为json格式是js的，所以相对来说比较简单，出了json还可以是xml，只不过接受的时候比较麻烦，

javascript，xml，后台异步

实际是一种高级的JavaScript语言，你要学ajax就必须要知道JavaScript语言，关于无刷新，比如有的网站，旁边有个用户名登陆框

这次给大家带来详解Ajax的原理及优缺点有哪些，使用Ajax的原理及优缺点的注意事项有哪些，下面就是实战案例，一起来看一下。1、ajax技术的背景不可否认，ajax技术的流行得益于google的大力推广，正是由于google earth、google suggest以及gmail等对ajax技术的广泛应用，催生了ajax的流行。而这也让微软感到无比的尴尬，因为早在97年，微软便已经发明了ajax中的关键技术，并且在99年IE5推出之时，它便开始支持XmlHttpRequest对象，并且微软之前已经开始在它的一些产品中应用ajax，比如说MSDN网站菜单中的一些应用。遗憾的是，不知道出于什么想法，当时微软发明了ajax的核心技术之后，并没有看到它的潜力而加以发展和推广，而是将它搁置起来。对于这一点来说，我个人是觉得非常奇怪的，因为以微软的资源和它的战略眼光来说，应该不会看不到ajax技术的前景，唯一的解释也许就是因为当时它的主要竞争对手Netscape的消失反而使它变得麻痹和迟钝，毕竟巨人也有打盹的时候，比如IBM曾经在对微软战略上的失误。正是这一次的失误，成就了它现在的竞争对手google在ajax方面的领先地位，而事实上google目前在ajax技术方面的领先是微软所无法达到的，这一点在后面我讲述ajax缺陷的时候也会提到。现在微软也意识到了这个问题，因此它也开始在ajax领域奋起直追，比如说推出它自己的ajax框架atlas，并且在.NET2.0也提供了一个用来实现异步回调的接口，即ICallBack接口。那么微软为什么对自己在ajax方面的落后如此紧张呢？现在就让我们来分析一下ajax技术后面隐藏的深刻意义。2、ajax技术的意义我们在平时的开发中都多多少少的接触或者应用到了ajax，谈到ajax技术的意义，我们关注得最多的毫无疑问是提升用户的体验。但是，如果我们结合将来电脑和互联网的发展趋势，我们会发现ajax技术在某些方面正好代表了这种趋势。为什么这样说呢？我们知道，自从电脑出现以来，一直是桌面软件占据着绝对主导的地位，但是互联网的出现和成功使这一切开始发生着微妙的变化。相当一部分的人都相信，迟早有一天，数据和电脑软件将会从桌面转移到互联网。也就是说，将来的电脑有可能抛弃笨重的硬盘，而直接从互联网来获取数据和服务，我记得我念大学的时候，有位教授给我们上课的时候，曾经设想过这样一种情景，也许在将来的电脑桌面上，没有任何多余的软件和程序，而仅仅只有一个IE，虽然现在看起来我们距离这一天还很遥远，并且这其中还有很多的问题需要解决，但是我觉得这个并非梦想，而是迟早将实现的现实。那么，这其中的主要问题就是互联网的连接不稳定，谁也不愿意看着自己的电脑从服务器一点一滴的下载数据，那么，ajax是不是解决了这个问题呢，说实话，与其说ajax解决了这个问题，倒不如它只是掩盖了这个问题，它只是在服务器和客户端之间充当了一个缓冲器，让用户误以为服务没有中断。精确的说，ajax并不能提高从服务器端下载数据的速度，而只是使这个等待不那么令人沮丧。但是正是这一点就足以产生巨大的影响和震动，它实际上也对桌面软件产生了巨大的冲击。这一点我用一个例子来说明，我们可以比较一下Outlook Express和Gmail，前者是典型的桌面软件，后者是ajax所实现的B/S模式，实际上后者目前已经在慢慢取代前者了，Gmail在收发邮件的时候已经和Outlook Express的功能几乎没有差别了，而且它不需要安装客户端程序。这就是为什么微软对ajax所带来的冲击有着如此的恐惧心理，并且在它前不久所进行的调查之中，将google看做他们未来十年内的主要竞争对手的主要原因之一。当然，这种变化也并不会将桌面软件全部淘汰，现有的浏览器还没有一个能像PhotoShop等桌面程序那样处理复杂的图像。但是我们也不能忽视它带来的影响和冲击。3、关于ajax的名字ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。关于同步和异步异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。具体来说，异步传输是将比特分成小组来进行传送。一般每个小组是一个8位字符，在每个小组的头部和尾部都有一个开始位和一个停止位，它在传送过程中接收方和发送方的时钟不要求一致，也就是说，发送方可以在任何时刻发送这些小组，而接收方并不知道它什么时候到达。一个最明显的例子就是计算机键盘和主机的通信，按下一个键的同时向主机发送一个8比特位的ASCII代码，键盘可以在任何时刻发送代码，这取决于用户的输入速度，内部的硬件必须能够在任何时刻接收一个键入的字符。这是一个典型的异步传输过程。异步传输存在一个潜在的问题，即接收方并不知道数据会在什么时候到达。在它检测到数据并做出响应之前，第一个比特已经过去了。这就像有人出乎意料地从后面走上来跟你说话，而你没来得及反应过来，漏掉了最前面的几个词。因此，每次异步传输的信息都以一个起始位开头，它通知接收方数据已经到达了，这就给了接收方响应、接收和缓存数据比特的时间；在传输结束时，一个停止位表示该次传输信息的终止。按照惯例，空闲（没有传送数据）的线路实际携带着一个代表二进制1的信号。步传输的开始位使信号变成0，其他的比特位使信号随传输的数据信息而变化。最后，停止位使信号重新变回1，该信号一直保持到下一个开始位到达。例如在键盘上数字“1”，按照8比特位的扩展ASCII编码，将发送“00110001”，同时需要在8比特位的前面加一个起始位，后面一个停止位。同步传输的比特分组要大得多。它不是独立地发送每个字符，每个字符都有自己的开始位和停止位，而是把它们组合起来一起发送。我们将这些组合称为数据帧，或简称为帧。数据帧的第一部分包含一组同步字符，它是一个独特的比特组合，类似于前面提到的起始位，用于通知接收方一个帧已经到达，但它同时还能确保接收方的采样速度和比特的到达速度保持一致，使收发双方进入同步。帧的最后一部分是一个帧结束标记。与同步字符一样，它也是一个独特的比特串，类似于前面提到的停止位，用于表示在下一帧开始之前没有别的即将到达的数据了。同步传输通常要比异步传输快速得多。接收方不必对每个字符进行开始和停止的操作。一旦检测到帧同步字符，它就在接下来的数据到达时接收它们。另外，同步传输的开销也比较少。例如，一个典型的帧可能有500字节（即4000比特）的数据，其中可能只包含100比特的开销。这时，增加的比特位使传输的比特总数增加2.5%，这与异步传输中25 %的增值要小得多。随着数据帧中实际数据比特位的增加，开销比特所占的百分比将相应地减少。但是，数据比特位越长，缓存数据所需要的缓冲区也越大，这就限制了一个帧的大小。另外，帧越大，它占据传输媒体的连续时间也越长。在极端的情况下，这将导致其他用户等得太久。个小时，在这10个小时内水没有完全断，只是流量比原来小了很多，在10个小时后恢复正常流量，那么，如果是你你会选择哪种方式呢？显然是后者。4、ajax所包含的技术大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。1.使用CSS和XHTML来表示。2. 使用DOM模型来交互和动态显示。3.使用XMLHttpRequest来和服务器进行异步通信。4.使用javascript来绑定和调用。在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。5、ajax原理和XmlHttpRequest对象Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。所以我们先从XMLHttpRequest讲起，来看看它的工作原理。首先，我们先来看看XMLHttpRequest这个对象的属性。它的属性有：onreadystatechange 每次状态改变所触发事件的事件处理程序。responseText从服务器进程返回数据的字符串形式。responseXML从服务器进程返回的DOM兼容的文档数据对象。status从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）status Text伴随状态码的字符串信息readyState对象状态值0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）1 (初始化) 对象已建立，尚未调用send方法2 (发送数据) send方法已调用，但是当前的状态及http头未知3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。function CreateXmlHttp(){//非IE浏览器创建XmlHttpRequest对象if(window.XmlHttpRequest){xmlhttp=new XmlHttpRequest();}//IE浏览器创建XmlHttpRequest对象if(window.ActiveXObject){try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){try{xmlhttp=new ActiveXObject("msxml2.XMLHTTP");}catch(ex){}}}}function TestAjax(){var data=document.getElementByIdx("username").value;CreateXmlHttp();if(!xmlhttp){alert("创建xmlhttp对象异常！");return false;}xmlhttp.open("POST",url,false);xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4){document.getElementByIdx("user1").innerHTML="数据正在加载...";if(xmlhttp.status==200){document.write(xmlhttp.responseText);}}}xmlhttp.send();}如上所示，函数首先检查XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问请求状态，如果一切已经就绪（status=200），那么就执行下面需要的操作。对于XmlHttpRequest的两个方法，open和send，其中open方法指定了：a、向服务器提交数据的类型，即post还是get。b、请求的url地址和传递的参数。c、传输方式，false为同步，true为异步。默认为true。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式。Send方法用来发送请求。知道了XMLHttpRequest的工作流程，我们可以看出，XMLHttpRequest是完全用来向服务器发出一个请求的，它的作用也局限于此，但它的作用是整个ajax实现的关键，因为ajax无非是两个过程，发出请求和响应请求。并且它完全是一种客户端的技术。而XMLHttpRequest正是处理了服务器端和客户端通信的问题所以才会如此的重要。现在，我们对ajax的原理大概可以有一个了解了。我们可以把服务器端看成一个数据接口，它返回的是一个纯文本流，当然，这个文本流可以是XML格式，可以是Html，可以是Javascript代码，也可以只是一个字符串。这时候，XMLHttpRequest向服务器端请求这个页面，服务器端将文本的结果写入页面，这和普通的web开发流程是一样的，不同的是，客户端在异步获取这个结果后，不是直接显示在页面，而是先由javascript来处理，然后再显示在页面。至于现在流行的很多ajax控件，比如magicajax等，可以返回DataSet等其它数据类型，只是将这个过程封装了的结果，本质上他们并没有什么太大的区别。6、ajax的优点Ajax的给我们带来的好处大家基本上都深有体会，在这里我只简单的讲几点：1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。7、ajax的缺点下面我着重讲一讲ajax的缺陷，因为平时我们大多注意的都是ajax给我们所带来的好处诸如用户体验的提升。而对ajax所带来的缺陷有所忽视。下面所阐述的ajax的缺陷都是它先天所产生的。1、ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。2、安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。3、对搜索引擎的支持比较弱。4、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题，我曾经在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来我自己做了一次试验，分别采用ajax和传统的form提交的模式来删除一条数据??给我们的调试带来了很大的困难。5、另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。例如，我给你一个url地址，如果采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。6、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如说我们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的，当然，这个问题和我们没太多关系。8、ajax的几种框架目前我们采用的比较多的ajax框架主要有ajax.dll,ajaxpro.dll,magicajax.dll 以及微软的atlas框架。Ajax.dll和Ajaxpro.dll这两个框架差别不大，而magicajax.dll只是封装得更厉害一些，比如说它可以直接返回DataSet数据集，前面我们已经说过，ajax返回的都是字符串，magicajax只是对它进行了封装而已。但是它的这个特点可以给我们带来很大的方便，比如说我们的页面有一个列表，而列表的数据是不断变化的，那么我们可以采用magicajax来处理，操作很简单，添加magicajax之后，将要更新的列表控件放在magicajax的控件之内，然后在pageload里面定义更新间隔的时间就ok了，atlas的原理和magicajax差不多。但是，需要注意的一个问题是，这几种框架都只支持IE，没有进行浏览器兼容方面的处理，用反编译工具察看他们的代码就可以知道。除了这几种框架之外，我们平时用到的比较多的方式是自己创建xmlHttpRequest对象，这种方式和前面的几种框架相比更具有灵活性。另外，在这里还提一下aspnet2.0自带的异步回调接口，它和ajax一样也可以实现局部的无刷新，但它的实现实际上也是基于xmlhttprequest对象的，另外也是只支持IE，当然这是微软的一个竞争策略。9.ajax应用举例以上内容是转载高人写的资料，下面我将我在项目中实际应用给出个例子，这个例子是这样的：我参与的一个项目的值班安排模块里，选择值班人时，弹出的是个联系人树型TreeView结构图，点开哪个部门，然后部门下的联系人就展开了，原先是这样的，选择好某些联系人后，哪天白天或晚上的值班人就是这样的格式”小A，小B”，但是现在要求这样的格式”小A(部门一)，小B（部门二）”这里假设小A属于部门一，小B属于部门二。由于选择联系人是纯前台javascript的操作的，这里要通过联系人userlist表中的部门id，来取得部门的名称，也就是通过前台取后台的数据，这个在系列五里我也阐述过，下面给出代码：var param= "date=<%=stryear%>/<%=strmonth%>/" + x <%=stryear%><%=strmonth%>+"&Type=" + type+"&Other=" + eval_r("formData.RBOTHER"+x+".value")+"&ZBRY=" + eval_r("formData.RBZBRY"+x+".value")+"&ZBRYID=" + eval_r("formData.RBZBRYID"+x+".value")+"&Demo=" + eval_r("formData.RBDEMO"+x+".value")+"&id=" + eval_r("formData.RBZBID"+x+".value");//传递的参数var retVal = window.showModalDialog( "chooseUsers.asp?"+param,this, "dialogWidth=280px; dialogHeight=500px; help=no; status=no; scroll=no; resizable=yes; ");//弹出对话框取得联系人//ajax调用服务器端方法取到部门名称if(retVal ["userIds"]!=""&& retVal ["userIds"]!=null)//联系人id集合格式1，2，3，4{var PostUrl=" ../../../Application/CallBoard/GetDepartMentByUid.aspx?userIDs="+objRetVal["userIds"]+"";//后台处理页面urlxmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//新建一个xmlhttprequest对象xmlHttp.open("POST", PostUrl, false);xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlHttp.send("");var builder= xmlHttp.responseText; //将值传递回来,拼成了新格式eval_r("formData.RBZBRY"+x+".value = "" +builder+""");// formData.RBZBRY为一文本控件,将显示值班人员新格式}}相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：Ajax请求async有哪些方

如何做到异步和局部刷新？下面小编就为大家带来一篇AJAX的原理—如何做到异步和局部刷新。现在分享给大家，也给大家做个参考。Overriew： onReadyStateChange被回调函数赋值，则能实现异步调用，回调函数直接操作DOM，则能实现局部刷新。那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢？状态如何change了呢（观察者模式）？则是通过客户端对服务的状态询问（定期轮询）所实现的。详解：1. XMLHttpRequest 负责与服务器端的通讯，其内部有很多重要的属性：readyStatus=4，status=200等等。当XMLHttpRequest的整体状态并且保证它已经完成（readyStatus=4），即数据已经发送完毕。然后根据服务器的设定询问（类似于客户端会轮询服务器的返回状态，仍然是http短连接,并非长连接的服务器端push）请求状态，如果一切已经就绪（status=200），那么就执行需要的操作。操作一般就是直接操作DOM，所以AJAX能做到所谓的“无刷新”用户体验。2. 那么在AJAX客户端如何做到的异步呢？实际上就是Javascript的回调函数起的作用提供一个回调JavaScript函数，一旦服务器响应可用，该函数就被执行业务函数：第一行定义了JavaScript回调函数，一旦响应就绪它就自动执行，而req.open()方法中所指定的“true”标志说明想要异步执行该请求。一旦服务器处理完XmlHttpRequest并返回给浏览器，使用req.onreadystatechange指派所设置的回调方法将被自动调用。回调函数：上面是我整理给大家的，希望今后会对大家有帮助。相关文章：深入浅析Nginx实现AJAX跨域请求问题AjaxToolKit之Rating控件的使用方法基于Ajax技术实现文件上传带进度条

本篇文章主要和大家讲述ajax的工作原理，具有一定参考价值，感兴趣的朋友可以了解一下，希望对你有所帮助。 Ajax指Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。而实现的原理基础就是：网页DOM对象可以精确地对网页中的部分内容进行操作、XML作为单纯的数据存储载体使得客户端与服务器交换的只是网页内容的数据而没有网页样式等等的附属信息、XMLHttpRequest是与浏览器本身内置的request相互独立的与服务器交互的请求对象。 网页应用Ajax与服务器交互的抽象过程如下图： 过程详解： 1： 要使用Ajax技术，基础中的基础，就是要创建一个XMLHttpRequest对象，无它就没有异步传输的可能：var xmlhttp;if (window.XMLHttpRequest) { //检查浏览器的XMLHttpRequest属性，如果为真则支持XMLHttpRequest// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 浏览器执行代码xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 2：在网页中为某些事件的响应绑定异步操作：通过上面创建的xmlhttp对象传输请求、携带数据。在发出请求前要先定义请求对象的method、要提交给服务器中哪个文件进行请求的处理、要携带哪些数据、是否异步。 其中，与普通的request提交数据一样，这里也分两种方法：GET/POST xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",); xmlhttp.send();xmlhttp.open("POST","/try/ajax/demo_post2.php","Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Henry&lname=Ford"); 3：服务器收到请求后，把附带的数据作为输入传给处理请求的文件，例如这里：把fname=Henry&lname=Ford作为输入，传给 /try/ajax/demo_get2.php 这个文件。然后文件根据传入的数据做出处理，最终返回结果，通过response对象发回去。客户端根据xmlhttp对象来获取response内容，然后调用DOM对象根据response内容来局部修改网页内容。xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200)//请求处理完毕且状态为成功 { document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//用response内容来修改DOM中的元素的内容 } 其中，response的类型有两种：字符串类型和XML文本。两种回应的不同提取如下：responseText 属性返回字符串形式的响应：document.getElementById("myp").innerHTML=xmlhttp.responseText;如果来自服务器的响应是 XML，需要作为 XML 对象进行解析，使用 responseXML ：xmlDoc=xmlhttp.responseXML; //获取服务器响应的XML文本并转换得到XMLDOM对象txt="";x=xmlDoc.getElementsByTagName("ARTIST");//通过XMLDOM对象调用方法来获取XML对象中的内容for (i=0;i<x.length;i++) {txt=txt + x[i].childNodes[0].nodeValue + "<br>"; }document.getElementById("myDiv").innerHTML=txt;//把获取到的内容通过document对象更新到网页内容去容去 相关教程：ajax视频教程

这次给大家带来怎么用AjaxFileUpload实现多文件上传，用AjaxFileUpload实现多文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。本文重点给大家介绍AjaxFileUpload+Struts2实现多文件上传功能，具体实现代码大家参考下本文。单文件和多文件的实现区别主要修改两点，一是插件ajaxfileupload.js里接收file文件ID的方式二是后台action是数组形式接收1、ajaxFileUpload文件下载地址http://www.phpletter.com/Demo/AjaxFileUpload-Demo/2、引入jquery-1.8.0.min.js、ajaxFileUpload.js文件3、文件上传页面核心代码<body> <form action="" enctype="multipart/form-data"> <h2> 多文件上传 </h2> <input type="file" id="file1" name="file" /> </br> <input type="file" id="file2" name="file" /> </br> <input type="file" id="file3" name="file" /> </br> <span> <table id="down"> </table> </span> </br> <input type="button" onclick="fileUpload();" value="上传"> </form> </body> <script type="text/javascript"> function fileUpload() { var files = ["file1","file2","file3"]; //将上传三个文件 ID 分别为file2,file2,file3 $.ajaxFileUpload( { url : "fileUploadAction", //用于文件上传的服务器端请求地址 secureuri : false, //一般设置为false fileElementId : files, //文件上传的id属性 <input type="file" id="file" name="file" /> dataType : "json", //返回值类型 一般设置为json success : function(data, status) { var fileNames = data.fileFileName; //返回的文件名 var filePaths = data.filePath; //返回的文件地址 for(var i=0;i<data.fileFileName.length;i++){ //将上传后的文件 添加到页面中 以进行下载 $("#down").after("<tr><td height="25">"+fileNames[i]+ "</td><td><a href="downloadFile?downloadFilePath="+filePaths[i]+"">下载</a></td></tr>") } } }) } </script>以上fileElementId属性接收的files参数为["file1","file2","file3"]由于是多文件,所以我们需要修改ajaxfileupload.js 找到以下代码var oldElement = jQuery("#" + fileElementId); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr("id", fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form);修改为：for(var i in fileElementId){ var oldElement = jQuery("#" + fileElementId[i]); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr("id", fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); }4、文件上传Actionpublic class FileAction { private File[] file; //文件 private String[] fileFileName; //文件名 private String[] filePath; //文件路径 private String downloadFilePath; //文件下载路径 private InputStream inputStream; /** * 文件上传 * @return */ public String fileUpload() { String path = ServletActionContext.getServletContext().getRealPath("/upload"); File file = new File(path); // 判断文件夹是否存在,如果不存在则创建文件夹 if (!file.exists()) { file.mkdir(); } try { if (this.file != null) { File f[] = this.getFile(); filePath = new String[f.length]; for (int i = 0; i < f.length; i++) { String fileName = java.util.UUID.randomUUID().toString(); // 采用时间+UUID的方式随即命名 String name = fileName + fileFileName[i].substring(fileFileName[i].lastIndexOf(".")); //保存在硬盘中的文件名 FileInputStream inputStream = new FileInputStream(f[i]); FileOutputStream outputStream = new FileOutputStream(path+ "\" + name); byte[] buf = new byte[1024]; int length = 0; while ((length = inputStream.read(buf)) != -1) { outputStream.write(buf, 0, length); } inputStream.close(); outputStream.flush(); //文件保存的完整路径 // 如：D: omcat6webappsstruts_ajaxfileupload\uploada0be14a1-f99e-4239-b54c-b37c3083134a.png filePath[i] = path + "\" + name; } } } catch (Exception e) { e.printStackTrace(); } return "success"; } /** * 文件下载 * @return */ public String downloadFile() { String path = downloadFilePath; HttpServletResponse response = ServletActionContext.getResponse(); try { // path是指欲下载的文件的路径。 File file = new File(path); // 取得文件名。 String filename = file.getName(); // 以流的形式下载文件。 InputStream fis = new BufferedInputStream(new FileInputStream(path)); byte[] buffer = new byte[fis.available()]; fis.read(buffer); fis.close(); // 清空response response.reset(); // 设置response的Header String filenameString = new String(filename.getBytes("gbk"),"iso-8859-1"); response.addHeader("Content-Disposition", "attachment;filename="+ filenameString); response.addHeader("Content-Length", "" + file.length()); OutputStream toClient = new BufferedOutputStream(response.getOutputStream()); response.setContentType("application/octet-stream"); toClient.write(buffer); toClient.flush(); toClient.close(); } catch (IOException ex) { ex.printStackTrace(); } return null; } /** * 省略set get方法 */ }5、struts配置<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name="ajax_code" extends="json-default"> <!-- 文件上传 --> <action name="fileUploadAction" class="com.itmyhome.FileAction" method="fileUpload"> <result type="json" name="success"> <param name="contentType">text/html</param> </result> </action> </package> <package name="jsp_code" extends="struts-default"> <!-- 文件下载 --> <action name="downloadFile" class="com.itmyhome.FileAction" method="downloadFile"> <result type="stream"> <param name="contentType">application/octet-stream</param> <param name="inputName">inputStream</param> <param name="contentDisposition">attachment;filename=${fileName}</param> <param name="bufferSize">4096</param> </result> </action> </package> </struts>浏览器中输入：http://localhost:8080/struts_ajaxfileupload/index.jsp 即可进行文件上传如图：相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：Ajax和jsonp在项目中的实战总结只需四步即可实现ajax发送异步请求

后台返回JsonConvert.SerializeObject(object value)这样的json数据应该可以using Newtonsoft.Json.Converters；json在这个命名空间下

今天笔者在这里讲一讲使用joomla自带的mootoolsjavascript库的实现ajax,由于是自带库,所以不用管有没有jquery,那么怎么实现呢,首先建立一个ajax的获取按钮,一般我们都是在组件的编辑中用到,所以文件一般在views你的视图 mpldefault.php里面:复制代码代码如下:<inputtype="button"id="ajaxButton"value="Get方式"/><divid="someID"></div>$doc=&JFactory::getDocument();$script=<<<SCRIPTwindow.addEvent("domready",function(){$("ajaxButton").addEvent("click",function(){newAjax("index.php?option=com_category&controller=category&task=aj&format=ajax",{method:"get",update:"someID"}).request();});});SCRIPT;input这一行是一个获取ajax的按钮,接着是显示返回数据的div层,下面就是使用ajax的mootools代码,简单说下,这里是通过getDocument类方法添加js到文档head里面,注意这里$是代表mootools类库,ajax里面的网址参数首先是组件名,控制器名,执行的方法aj,这个写在控制器里面,就是点击后执行的方法,需要写返回数据,最后就是返回数据类型,这里必须是ajax,否则会把整个文档都返回,我们这里只要aj方法的返回数据部分.有两个参数,get是获取数据方式,someID是绑定的返回数据显示id,这都是必须的.ajax使用不是必须的,但是有时候不得不用,如果使用原生态的,我想加载还是很快的,mootools库笔者也没有用过,只是照猫画虎,这里毕竟是提供了一种实现ajax的方法,怎么实现POST方法呢,只需要添加相应表单元素即可.在这里笔者就不多说了,因为用的不是很多.好了,就讲到这里,就不提供例子了,如果你需要可以在遇到编辑表单元素时候试试代码什么的都很短,copy一下就好了!

这次给大家带来为什么Ajax的请求会一次点击多次提交，Ajax请求一次点击多次提交的注意事项有哪些，下面就是实战案例，一起来看一下。页面中的按钮的type是submit的： <input type="submit" value="Create" id="submit" />ajax的请求，在JQuery中是：$(function () {$("#submit").click(function () {var createGenreForm = $("#createGenreForm");if (createGenreForm.valid()) {var obj = {Name: $("#Name").val(),Description: $("#Description").val()};var jsonSerialized = JSON.stringify(obj);$.ajax({type: "POST",url: createGenreForm.attr("action"),dataType: "json",contentType: "application/json; charset=utf-8",data: jsonSerialized,success: function (result) {alert(result.Message);},error: function (error) {alert("There was an error posting the data to the server: " + error.responseText);}});}});});发生两次提交的原因是在执行完ajax请求后，并没有阻止submit的行为，所以解决方法有两种：1、不使用type为submit类型的按钮，而是使用type是button的按钮。2、在$("#submit").click函数中，最后加一行return false;，即可阻止submit。一点说明：为什么在标题中要嵌入英文？原因是为了能够让国外的网友能查询到这篇文章。平常在Google上查资料的时候，经常参考国外网友的博客，帮助我解决了很多问题，所以我也想让他们能够参考我写的内容。当然文中我不可能全部译为英文，所以我尽量把代码粘全，靠代码说话吧。相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：ajax怎样提交form表单与实现文件上传ajax后台success上传的json数据如何处理

action有定义，是这个action的result没有定义。

<input type="button" value="删除" name="del" id="submit"/><script>$(function(){ $("#submit").click(function(){ var a = confirm("确认删除？"); //弹出confirm框 if(a == true){ //确认删除 $.ajax({ //ajax代码 }) }else{ } return false; });})</script>

注意，对应的Controller类不能使用 @RestController 注解。 具体参考： https://www.thymeleaf.org/doc/tutorials/2.1/thymeleafspring.html#rendering-template-fragments 布局方式同fragment方式，webController方法中有改动： 具体参考： https://stackoverflow.com/questions/20982683/spring-mvc-3-2-thymeleaf-ajax-fragments tinytongtong / spring-thymeleaf

因为ajax提交时，必须显示的把表单值设上，你看看你写的这句：data:{ "action":"get", "dz":"jbxx" }里面没pwd这个值，所以System.out.println(request.getParameter("pwd"));是null

表单提交到后台有乱码解决： ajax提交的时候用‘data="+encodeURIComponent("测试")；后台request的时候用String data=new String(request.getParameter("data").getBytes("iso-8859-1"), "UTF-8");你说返回到前台的信息中文乱码，我想请问你，你怎么接收来自后台的返回信息的呢？

这次给大家带来ajax结合豆瓣搜索进行分页如何实现（附代码），ajax结合豆瓣搜索进行分页实现的注意事项有哪些，下面就是实战案例，一起来看一下。使用豆瓣api，得到分页结果。相当于从后台数据库获得的结果一样。所不同的是，没法事先知道页数。虽然通过请求api可以获得总页数，但由于ajax是异步的，所以对于分页一开始就要给出总页数来说，这是没有意义的。我使用了一个固定总页数65（正是搜索javascript书籍返回的总页数）。所以其他书籍是并不是65页，会出现多页或者少页的情况，这并不是bug。特点1，全程不需要接触后台，前端独立就可以（我找过好长时间都没找过完整的例子）。 2，使用了bootstrap的pagination制作页码和panel制作放置结果的面板。 代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /><!-- 换成自己的目录 --> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> </head> <style> .pagination> li > a { cursor: pointer; } .pagination > li > span { margin-left: 0; color: #ccc; background-color: transparent; cursor: default; } .pagination > li > span:hover { color: #ccc; background-color: transparent; cursor: default; } .m20 { margin: 20px 0; } </style> <body> <p class="container-fluid"> <p class="col-md-12"> <p class="panel panel-default"> <p class="panel-heading"> <form class="input-group"> <input type="text" value="javascript" class="form-control" id="bookName" placeholder="请输入书名" required="required"/> <span class="input-group-btn"> <button class="btn" id="search">搜索</button> </span> </form> </p> <p class="panel-body"> <table class="table table-bordered"> <thead> <th>书名</th> <th>作者</th> <th>出版日期</th> <th>平均分</th> <th>价格</th> </thead> <tbody id="tbody"> </tbody> </table> </p> </p> <p class="row"> <p class="col-md-6"> <p id="test"></p> </p> <p class="col-md-4"> <p class="input-group m20"><!-- 保持与#test中的.pagination对齐 --> <input type="text" class="form-control" id="page"/> <span class="input-group-btn"> <button class="btn btn-default" id="jumpToPage">GO</button> </span> </p> </p> </p> <p id="result" class="alert alert-info"></p> </p> </p> <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script> <!-- 换成自己的目录 --> <script type="text/javascript" src="js/bootstrap.js" ></script> <!-- 换成自己的目录 --> <script type="text/javascript"> var partPageModule = ( function ( $ ) { var initPager = null,// 初始换分页函数 setPagerHTML = null,// 生成分的页HTML代码 pageClick = null,//每一页按钮的点击事件 ajax = null, // ajax请求后台数据 renderButton = null, $content = $( "" ) // 动态生成的页码 ; /* 功能：完成初始化 * @totalPages 总页数，从后端获取 * @currentPage 当前所在的页数 */ initPager = function ( totalPages, currentPage ) { $content = setPagerHTML({ currentPage: currentPage, totalPages: totalPages, pageClick: PageClick }) $( "#test" ).empty().append( $content );// 得到分页后添加到#test $( "#jumpToPage" ).click( function ( e ) {// 绑定GO按钮的点击事件 e.preventDefault(); PageClick( totalPages, $("#page").val() * 1); }) $( "#page" ).keyup( function ( e ) {// Enter键绑定搜索事件 if ( e.keyCode === 13 ) { $( "#jumpToPage").trigger( "click" ); } }) $( "#result" ).html( "你点击的是第" + currentPage + "页") }; /* 功能：页码点击事件。重新生成所有页码，并且使用ajax获取数据 */ PageClick = function ( totalPages, currentPage ) { initPager( totalPages, currentPage ); ajax( currentPage );// 使用jsonp请求豆瓣 } ajax = function ( currentPage ) { var $input = $( "#bookName" ), bookName = "", $tbody = $( "#tbody" )// totalPages ; bookName = $input.val(); if ( !bookName ) { // 如果没有输入，就不要发送请求了 $input.focus(); return; } else { $.ajax({ type: "get", url: "https://api.douban.com/v2/book/search",// 豆瓣图书api dataType: "jsonp", data: { q: bookName, start: ( parseInt( currentPage )-1 )*20 || 0 }, success: function ( data ) { var html = "", books = data.books ;// totalPages = Math.ceil( data.total / data.count ); books.forEach( function ( value, index ) { html += "<tr>" + "<td><a href="" + value.alt + "">" + value.title + "</a></td>" + "<td>" + value.author + "</td>" + "<td>" + value.pubdate + "</td>" + "<td>" + value.rating.average + "</td>" + "<td>" + value.price + "</td>" + "</tr>"; }) $tbody.html( html ); } }) }// return totalPages; } setPagerHTML = function ( options ) { var currentPage = options.currentPage, totalPages = options.totalPages, pageClick = options.pageClick, $content = $("<ul class="pagination"></ul>"), startPage = 1, nextPage = currentPage + 1,//不需要考虑超出问题，后面有条件 prevPage = currentPage - 1 ; /* 逻辑处理，根据点击的不同的页生成不同的ul */ if ( currentPage == startPage ) {//当前页是起始页 $content.append( "<li><span>首页</span></li>" ); // 首页不可用 $content.append( "<li><span>上一页</span></li>" ); // 上一页不可用 } else { // 不是起始页 $content.append( renderButton( totalPages, 1, pageClick, "首页") ); // 生成首页并绑定事件 $content.append( renderButton( totalPages, prevPage, pageClick, "上一页") ); // 生成上一页并绑定事件 } if ( totalPages <=5 && currentPage <= 5 ) {// 总页数小于5，当前页小于5，全部生成页码 for ( var i = 1; i <= totalPages; i++ ) { if( i === currentPage ) { $content.append( "<li class="active><span>" + i + "</span></li>" );// 当前页不可点击 } else { $content.append( renderButton( totalPages, i, pageClick, i) );// 其他页可以点击 } } } else if ( totalPages > 5 && totalPages - currentPage <= 2 ) {// 总页数大于5，当前页接近总页数，前面显示...,后面显示到结尾的页码 $content.append( "<li><span>...</span></li>" ); for( var i = totalPages - 4; i <= totalPages; i++ ) { if ( i === currentPage ) { $content.append( "<li class="active"><span>" + i + "</span></li>" ); } else { $content.append( renderButton( totalPages, i, pageClick, i) ); } } } else if ( totalPages > 5 && currentPage > 3) {// 总页数大于5，当前页在中间，前后生成...，生成中间页码 $content.append( "<li><span>...</span></li>" ); for ( var i = currentPage - 2; i < currentPage + 2; i++ ) { if ( i === currentPage ) { $content.append( "<li class="active"><span>" + i + "</span></li>" ); } else { $content.append( renderButton( totalPages, i ,pageClick, i) ); } } $content.append( "<li><span>...</span></li>" ); } else if ( totalPages > 5 && currentPage <= 3 ) {// 总页数大于5，当前页接近第一页，显示前面页码，后面显示... for ( var i = 1; i <= 5; i++ ) { if ( i === currentPage ) { $content.append( "<li class="active"><span>" + i + "</span></li>" ); } else { $content.append( renderButton( totalPages, i ,pageClick, i) ); } } $content.append( "<li><span>...</span></li>" ); } if ( currentPage == totalPages ) {//当前页是末页 $content.append( "<li><span>下一页</span></li>" ); // 下一页不可用 $content.append( "<li><span>末页</span></li>" ); // 末页不可用 } else { // 不是起始页 $content.append( renderButton( totalPages, nextPage, pageClick, "下一页") ); // 生成首页并绑定事件 $content.append( renderButton( totalPages, totalPages, pageClick, "末页") ); // 生成上一页并绑定事件 } return $content; } renderButton = function ( totalPages, goPageIndex, eventHander, text ) { var $gotoPage = $( "<li><a title="第" + goPageIndex + "页">" + text + "</a></li>" ); $gotoPage.click( function () { eventHander( totalPages, goPageIndex ); }) return $gotoPage; } return { init: initPager, ajax: ajax } }(jQuery)) $( function () { $( "#search" ).click( function ( e ) { e.preventDefault(); var totalPage = partPageModule.ajax(1);// 由于ajax是异步的， totalPage = totalPage || 65;// 所以这个总页数是不准确的。一般这个数据是后端返回的。这里的65是javascript搜索的页数，不同的书籍搜索结果不一样，由于ajax异步执行，所以这里会默认为65。这里不是bug。 partPageModule.init( totalPage, 1 ); }) $( "#bookName" ).keyup( function ( e ) { if ( e.keyCode === 13 ) { $( "#search" ).trigger( "click" ); } }) $( "#search" ).trigger( "click" ); }) </script&g

1、AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术,核心对象XMLHTTPRequest。该对象是浏览器API，支持向http服务器发送get post等http协议规定的请求方式。该方式不会重载页面，无刷新交换数据。是客户端browser与浏览器通讯的方式。执行宿主在浏览器的javascript引擎里面。2、cgi是服务器端的一段脚本。该脚本执行时信息输入来自管道，服务器会把请求输入重定向到cgi脚本的标准输入，把cgi脚本的执行的标准输出作为请求的响应！cgi也是一种形式上的后台接口！

先给大家展示下运行效果图： 1.后台action产生json数据。List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{"totalCount":""+totalRows+"","); sb.append(""jsonRoot":["); for (int i=0;i<blackList.size();i++) { LBlack blackInfo = (LBlack)blackList.get(i); sb.append("{"id":""+ blackInfo.getId()); sb.append("","); sb.append(""mobile":""+ blackInfo.getMobile()); sb.append("","); sb.append(""province":""+ blackInfo.getProvince()); sb.append("","); sb.append(""gateway":""+ blackInfo.getGateway()); sb.append("","); sb.append(""insertTime":""+ blackInfo.getInsertTime()); sb.append("","); sb.append(""remark":""+ blackInfo.getRemark()); sb.append("""); sb.append("},"); } sb.deleteCharAt(sb.lastIndexOf(",")); // 删去最后一个逗号 sb.append("]}"); HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/plain"); response.getWriter().print(sb); 2.struts.xml相关配置<action name="blackList" class="blackAction" method="blackList"> <!--plaintext用于显示页面原始代码的结果类型--> <result type="plainText"> <param name="charSet">UTF-8</param> <param name="location">/WEB-INF/jsp/manage/black.jsp</param> </result></action>3.js获取json数据分页显示function getJSONData(pn) { // alert(pn); $.getJSON("blackList.ce", function(data) { var totalCount = data.totalCount; // 总记录数 var pageSize = 10; // 每页显示几条记录 var pageTotal = Math.ceil(totalCount / pageSize); // 总页数 var startPage = pageSize * (pn - 1); var endPage = startPage + pageSize - 1; var $ul = $("#json-list"); $ul.empty(); for (var i = 0; i < pageSize; i++) { $ul.append("<li class="li-tag"></li>"); } var dataRoot = data.jsonRoot; if (pageTotal == 1) { // 当只有一页时 for (var j = 0; j < totalCount; j++) { $(".li-tag").eq(j).append("<span class="col1"><input type="checkbox" value=""+parseInt(j + 1)+""/></span>") .append("<span class="col2">" + parseInt(j + 1) + "</span>").append("<span class="col3">" + dataRoot[j].mobile + "</span>").append("<span class="col4">" + dataRoot[j].province + "</span>").append("<span class="col5">" + dataRoot[j].gateway + "</span>").append("<span class="col6">" + dataRoot[j].insertTime + "</span>").append("<span class="col7">" + dataRoot[j].remark + "</span>") } } else { for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) { if( j == totalCount){ break; // 当遍历到最后一条记录时，跳出循环 } $(".li-tag").eq(k).append("<span class="col1"><input type="checkbox" value=""+parseInt(j + 1)+""/></span>") .append("<span class="col2">" + parseInt(j + 1) + "</span>").append("<span class="col3">" + dataRoot[j].mobile + "</span>").append("<span class="col4">" + dataRoot[j].province + "</span>").append("<span class="col5">" + dataRoot[j].gateway + "</span>").append("<span class="col6">" + dataRoot[j].insertTime + "</span>").append("<span class="col7">" + dataRoot[j].remark + "</span>") } } $(".page-count").text(pageTotal); })}function getPage() { $.getJSON("blackList.ce", function(data) { pn = 1; var totalCount = data.totalCount; // 总记录数 var pageSize = 10; // 每页显示几条记录 var pageTotal = Math.ceil(totalCount / pageSize); // 总页数 $("#next").click(function() { if (pn == pageTotal) { alert("后面没有了"); pn = pageTotal; } else { pn++; gotoPage(pn); } }); $("#prev").click(function() { if (pn == 1) { alert("前面没有了"); pn = 1; } else { pn--; gotoPage(pn); } }) $("#firstPage").click(function() { pn = 1; gotoPage(pn); }); $("#lastPage").click(function() { pn = pageTotal; gotoPage(pn); }); $("#page-jump").click(function(){ if($(".page-num").val() <= pageTotal && $(".page-num").val() != ""){ pn = $(".page-num").val(); gotoPage(pn); }else{ alert("您输入的页码有误！"); $(".page-num").val("").focus(); } }) $("#firstPage").trigger("click"); })}function gotoPage(pn) { // alert(pn); $(".current-page").text(pn); getJSONData(pn)}$(function() { getPage();})ps：JAVA+JQuery实现异步分页最近一个项目要求实现异步分页，简单的写了一下，不好的请指出~/***分页类*/public class PageBean { publicint rowCount = 0; // 总记录数 publicint currentPage = 1;// 当前页数 publicint sizePerPage = 20;// 每页显示条数 publicint pageCount = 0;// 总页数 publicString pageURL;// 请求URL publicString pageDisplay;// JSP页面显示 publicString pageStyle = "numberStyle";// 分页样式 publicint pagePreOffset = 10;// 向前偏移量 publicint pageNextOffset = 9;// 向后偏移量 publicString pageCss;// 预留 publicString getPageCss() { returnpageCss; } publicvoid setPageCss(String pageCss) { this.pageCss = pageCss; } publicString getPageStyle() { returnpageStyle; } publicvoid setPageStyle(String pageStyle) { this.pageStyle = pageStyle; } publicint getPagePreOffset() { returnpagePreOffset; } publicvoid setPagePreOffset(intpagePreOffset) { this.pagePreOffset = pagePreOffset; } publicint getPageNextOffset() { returnpageNextOffset; } publicvoid setPageNextOffset(intpageNextOffset) { this.pageNextOffset = pageNextOffset; } publicString getPageDisplay() { String nextClick=" onclick="ajaxpage(""+this.pageURL+ "?currentPage=" + (this.currentPage + 1)+"");return false;" "; String preClick=" onclick="ajaxpage(""+this.pageURL+ "?currentPage=" + (this.currentPage - 1)+"");return false;" "; String firstClick=" onclick="ajaxpage(""+this.pageURL+ "?currentPage=1");return false;" "; String lastClick=" onclick="ajaxpage(""+this.pageURL+ "?currentPage=" + (this.getPageCount())+"");return false;" "; String onChange=" onchange="ajaxpage(""+this.pageURL+ "?currentPage=" + (1)+"");return false;" "; StringBuffer pageString =new StringBuffer(); pageString.append("<div class=""+ this.pageStyle +""><span >"); // 数字样式 if("numberStyle".equalsIgnoreCase(this.pageStyle)) { // 如果只有一页，不需要分页 if(this.getPageCount() ==1) { // pageString.append("<strong> 1</strong> "); }else { if(this.currentPage >1) {// 如果当前页数大于1，<< <可用 pageString.append("<a class="pagination-first" "+firstClick+" title="首页" href="" + this.pageURL +"?currentPage=1"><<</a> "); pageString.append("<a class="pagination-prev" "+preClick+"title="上一页" href="" + this.pageURL +"?currentPage=" + (this.currentPage -1) +""><</a> "); }else { pageString .append("<a class="pagination-first"><<</a> "); pageString .append("<a class="pagination-prev"><</a> "); } // 定义向前偏移量 intpreOffset = this.currentPage -1 > this.pagePreOffset ?this.pagePreOffset :this.currentPage -1; // 定义向后偏移量 intnextOffset = this.getPageCount() -this.currentPage >this.pageNextOffset ?this.pageNextOffset :this.getPageCount() -this.currentPage; // 循环显示链接数字，范围是从 当前页减向前偏移量 到 当前页加向后偏移量 for(int i = (this.currentPage - preOffset); i <= (this.currentPage + nextOffset); i++) { String numClick=" onclick="ajaxpage(""+this.pageURL+ "?currentPage=" + (i)+"");return false;" "; if(this.currentPage == i) {// 当前页要加粗显示 pageString .append("<strong style="color:black;border:0">" + i +"</strong> "); }else { pageString.append("<a "+numClick+"href=""+ this.pageURL +"?currentPage=" + i + "">" + i +"</a> "); } } // 如果当前页小于总页数，> >>可用 if(this.currentPage <this.getPageCount()) { pageString.append(&

方法如下：　$("#myForm").validate({ submitHandler : function(){ //在这里面写异步提交比如$.ajax({url:"",data:""}) }}); //然后再用事件调用这个提交,不要用submit按钮,就用普通按钮就行 $("#myForm").submit();

因为你用validate提交的写法是错的....$("#myForm").validate({ submitHandler : function(){ //在这里面写你的异步提交比如$.ajax({url:"",data:""}) }});//然后再用事件调用这个提交,不要用submit按钮,就用普通按钮就行$("#myForm").submit();

这次给大家带来Ajax怎么实现文件批量上传与下载，Ajax实现文件批量上传与下载的注意事项有哪些，下面就是实战案例，一起来看一下。今天做了文件的上传下载，小小总结一下，基本的web项目建立及SpringMVC框架搭建此处不详细写出来了。上传form：<form id="uploadfiles" enctype="multipart/form-data"> <input type="file" multiple="multiple" id="file_upload" name="file_upload" /> <input type="button" value="上传" onclick="upload()" /></form>上传Ajax：<script type="text/javascript">/* * 上传文件 */function upload(){ var formData = new FormData($( "#uploadfiles" )[0]); $.ajax({ type: "post", url: "./path/upload", dataType: "json", data: formData, /** *必须false才会自动加上正确的Content-Type */ contentType : false, /** * 必须false才会避开jQuery对 formdata 的默认处理 * XMLHttpRequest会对 formdata 进行正确的处理 */ processData : false, success: function(data){//从后端返回数据进行处理 if(data){ alert("上传成功！"); }else{ alert("上传失败！"); } }, error: function(err) {//提交出错 $("#msg").html(JSON.stringify(err));//打出响应信息 alert("服务器无响应"); } });}</script>spring.xml配置加上：<!-- 配置文件上传 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- 默认编码 --> <property name="defaultEncoding" value="utf-8" /> <!-- 文件大小最大值 --> <property name="maxUploadSize" value="10485760000" /> <!-- 内存中的最大值 --> <property name="maxInMemorySize" value="40960" /> </bean>controller：/* * 上传多个文件 */ @RequestMapping(value = "/upload", produces = "application/json;charset=UTF-8") public @ResponseBody boolean uploadFiles(@RequestParam("file_upload") MultipartFile [] files) { boolean result = false; String realPath; for(int i=0;i<files.length;i++){ if (!files[i].isEmpty()) { String uniqueName=files[i].getOriginalFilename();//得到文件名 realPath="E:"+File.separator+uniqueName;//文件上传的路径这里为E盘 files[i].transferTo(new File(realPath)); // 转存文件 result = true; } catch (Exception e) { e.printStackTrace(); } } } return result; }下载的jsp页面代码根据需求不同自己设计，这里给出controller代码：/* * 下载多个文件 */ @RequestMapping(value = "/download") public void downloadFiles(HttpServletResponse response) { String str= request.getParameter("rows");//下载文件信息，包括文件名、存储路径等 JSONArray path=(JSONArray) JSONArray.parse(request.getParameter("rows")); Path paths[]=new Path[path.size()]; paths = JSONArray.parseArray(str, Path.class).toArray(paths); String uri = "d:"+ File.separator + "mldn.zip";//临时文件存储路径 File zipFile = new File(uri) ; // 定义压缩文件名称 ZipOutputStream zipOut = null;// 声明压缩流对象 InputStream input = null; //将要压缩的文件加入到压缩输出流中 try { zipOut = new ZipOutputStream(new FileOutputStream(zipFile)); } catch (FileNotFoundException e) { e.printStackTrace(); } for(int i = 0;i<paths.length;i++){ File file = new File(paths[i].getUri()+File.separator+paths[i].getFilename()); try { input = new FileInputStream(file) ;// 定义文件的输入流 zipOut.putNextEntry(new ZipEntry(file.getName())) ; // 设置ZipEntry对象 } catch (Exception e) { e.printStackTrace(); } } //将文件写入到压缩文件中 int temp = 0 ; try { while((temp=input.read())!=-1){ // 读取内容 zipOut.write(temp) ; // 写到压缩文件中 } } catch (IOException e) { e.printStackTrace(); }finally{ try { input.close() ; zipOut.close() ; } catch (IOException e) { e.printStackTrace(); } } try { // 以流的形式下载文件。 BufferedInputStream fis = new BufferedInputStream(new FileInputStream(zipFile)); byte[] buffer = new byte[fis.available()]; fis.read(buffer); fis.close(); // 清空response response.reset(); OutputStream toClient = new BufferedOutputStream(response.getOutputStream()); response.setContentType("application/x-msdownload;"); response.setHeader("Content-Disposition", "attachment;filename=" + zipFile.getName()); toClient.write(buffer); toClient.flush(); toClient.close(); zipFile.delete(); //将生成的服务器端文件删除 } catch (IOException ex) { ex.printStackTrace(); } }将多个文件打成一个压缩包下载，然后将生成的临时压缩文件删除。下载页面如果用Ajax提交请求的话要注意：ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的数据。例子：function download(){ var form=$("<form>");//定义一个form表单 form.attr("style","display:none"); form.attr("target",""); form.attr("method","post"); form.attr("action","./path/download");//请求url var input1=$("<input>"); input1.attr("type","hidden"); input1.attr("name","rows");//设置属性的名字 input1.attr("value",“test”);//设置属性的值 $("body").append(form);//将表单放置在web中 form.append(input1); form.submit();//表单提交 }相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：实现无刷新下拉联动的Ajax+Servlet（附代码）怎样用Ajax异步检查用户名有无重复

servlet只能返回请求的那个页面你可以在数据返回到lefFrame后在转到mainFrame进行处理本身iframe就可以做局部刷新你这样做就没必要ajax了

List err=result.getFieldErrors(); FieldError fe; String field; String errorMessage; for (int i = 0; i < err.size(); i++) { fe=err.get(i); field=fe.getField();//得到那个字段验证出错 errorMessage=fe.getDefaultMessage();//得到错误

登录河北会计信息网 会计人员采集 输入身份证和密码 就会出现下面这些英文 显示好友http错误 我都把勾去掉了Error 500--Internal Server Error java.lang.IllegalArgumentException: id to load is required for loadingat org.hibernate.event.LoadEvent.(LoadEvent.java:51)at org.hibernate.event.LoadEvent.(LoadEvent.java:33)at org.hibernate.impl.SessionImpl.load(SessionImpl.java:792)at org.hibernate.impl.SessionImpl.load(SessionImpl.java:788)at org.springframework.orm.hibernate3.HibernateTemplate$3.doInHibernate(HibernateTemplate.java:569)如果是你访问别人的网站...是网页错误，可以将ie的高级设置里 显示友好http错误信息 哪个选项去掉如果是你自己的服务器原因就很多了1服务器资源超载. 如果你查到某个进程消耗过多资源，可以用kill命令强制关闭这个进程，只需输入该进程的进程号 2.文件权限设置错误 那么后台目录和文件的权限默认应该是755，而图片，文字等html文件应该是644，所以如果在刚刚上传文件后出现500错误，应该主要检查文件权限设置。可以使用FTP软件选中所有文件，然后批量修改文件权限。3 .htaccess文件写入错误的代码在使用某些wordpress SEO插件的时候，插件会改写.htacess文件，如果语法错误的话就有可能造成500错误！在.htaccess文件中，可能因为添入了一些与源文件冲突的代码。所以为了检测到错误语句，最好的方法是为语句添加注释来逐条验证。因为注释之后，语句就不再起作用。逐条添加“#”在语句前面，如DirectoryIndex default.htmlAddType application/x-httpd-php5 php你可以添加#到该命令前，从而实现注释效果：DirectoryIndex default.html#AddType application/x-httpd-php5 php这个方法可以迅速定位错误的命令，如果你找不到错误的段落，可以尝试把所有的命令全部添上注释然后反过来逐条删除#检查错误！判断出错误语句之后，可以删掉#恢复正常！

可以使用refreshDataTable方法，不要用fnGetData，你试一下

FLEX在浏览器上的应用前景一般，尽管新版本编程已经非常方便而且性能上有优化，支持多种后台技术，但是一般不会有人去做整站的FLEX开发，这个局限性跟FLASH平台有一定关系，前景看起来拼不过HTML5。但是FLEX不只是包含浏览器应用，还包含桌面和移动应用，在桌面应用上FLEX中的AIR的编程跟FLEX WEB应用编程几乎是一模一样的，编程、设置、发布流程非常方便快捷，性能也不错，已经有一些大公司在开发应用了（例如WEBQQ桌面版和新浪微博的桌面版），另外移动开发最新版本已经支持黑莓、ANDROID和IOS了，在桌面和移动领域无疑是有很大潜力的。

请把代码拷贝出来，好么？

<input type="image" id="i_signin" onclick="return checkSigninAjax()" class="signbtn" src="img/login_submit_btn.bmp"/>或者加在（个人建议最好加在form上面，这样的话，即使是用户直接按回车也可以执行AJAX）<form id="f_myForm" name="myForm" action="#" method="post" onsubmit="return checkSigninAjax()">然后修改JS的如下if(bFlag==1){ loation="正确时间转向的地址" return false;//注意这里也要返回false }else{ return false;}

你晕乎的是form的action属性&form的method属性&ajax的open的true这三个晕乎是吗？首先最基础的，学web最基础的html中的form表单这个先给你讲一下。form的action和method这连个属性是form表单必不可缺少的，也是最重要的。action的属性值是一个url，它指定了你的表单当单击submit按钮的时候提交到哪一个后台的控制器，比如哪一个servlet啊哪一个struts的action啊等等。当然这个action属性一般在某些应用里面呢会通过js来动态修改，这个再说。所以，action即动作嘛，有且只有一个用处，即单击submit后把请求连同参数提交到哪个后台的控制器，由你说了算。再就是method，method中文意思就是方法。http协议的请求方法有很多，比如get post delete head options put等，其中最常用的是get和post。你的请求一些情况下特别是表单的请求一般都带参数对不对，比如username等于张三，password等于123。如果指定使用get，那么这些参数就会在请求发送的时候，那么这些参数就会被url编码后被连缀在浏览器地址栏的url后面，所以，get的特点，第一，不安全，第二，容量有限毕竟url长度是有限的。post呢，相对安全，且长度比较长。所以，method参数就指定发送请求到服务器的方式方法，一般就是get和post。然后，说一下同步和异步这个东西，先独立于你的问题，先弄明白这两个概念的含义。同步请求就是需要等到服务器的响应之后，前台才能继续原来的工作。比如前台发了一个请求给服务器，然后这时候前台的任何工作就冻结了，等着吧。此时，服务器在繁忙的处理，处理完了把结果返回给前台，前台继续执行。这样前台必须等待后台的处理结果，如果后台处理太慢那么前台就一直等着，等到了结果才能继续，此乃同步。ajax的特色就在一异步，前台发了请求给后台，然后前台该干嘛干嘛，由单独的线程来监测后台的响应的返回。后台处理完了，返回前台，前台通过单独的线程来接受这个响应并处理，而且前台本身该做么做么，不需要等待服务器的响应和网络的延迟。此乃异步。表单form的请求无论你的action设置的是神马，method是神马，都是同步请求，即请求发送到服务器，服务器响应一会，前台等着结果再做处理。既然这种方式挺好的， 为么还需要异步？现在的互联网应用今非昔比，是富互联网应用时代，异步可以为我们带来更流畅的感觉更丰富的体验，好吧，跑题了，说你的问题。open（method url true）这个东西，首先这是js的原生的ajax（之所以是原生，是因为后面你学习前台框架比如jquery啊prototype啊会给你封装好ajax方便调用）代码，会发送一个ajax请求到后台。第一个参数method还用说吗，常用的非get就是post，特别要注意的是如果是get那么最后的send(x)方法也是要调用并且传递参数为null，如果是post那么在send这里传递参数即可。又跑题了。url即和上面的action一样的含义。看到了这里，我想你差不多应该明白了，form的那两个属性你先弄明白什么意思，然后对应到open的前两个参数，好理解了吧。最后就是第三个参数，如果是true那么代表异步，如果是false那么代表同步。虽然ajax的特点在于异步，但是同步也是经常使用的。还有么问题么？请追问。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="../script/jquery-1.10.2.js"></script></head><script type="text/javascript">$(function(){var check = 1;$("#myForm").submit(function(e){//取消默认提交事件//e.preventDefault();if(check == 1){console.log("验证通过，提交数据");$(this).ajaxSubmit({type: "post", // 提交方式 get/posturl: "/servlet/query", // 需要提交的 urldata: {"attr1": "白日依山尽","attr2": "宝塔镇河妖"},success: function(data) { // data 保存提交后返回的数据，一般为 json 数据// 此处可对 data 作相关处理alert("提交成功！");}});$(this).resetForm(); // 提交后重置表单}return false; // 阻止表单自动提交事件});});</script><body><form action="/servlet/query" method="post" id="myForm"><input type="text" name="userName" id="userName"/><input type="submit" id="btnSubmit" value="提交"/></form></body></html>试下用这个可否解决你的问题，另外jquery-form.js是可用实现form提交回调的；　

现在没有的吧

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="../script/jquery-1.10.2.js"></script></head><script type="text/javascript">$(function(){var check = 1;$("#myForm").submit(function(e){//取消默认提交事件//e.preventDefault();if(check == 1){console.log("验证通过，提交数据");$(this).ajaxSubmit({type: "post", // 提交方式 get/posturl: "/servlet/query", // 需要提交的 urldata: {"attr1": "白日依山尽","attr2": "宝塔镇河妖"},success: function(data) { // data 保存提交后返回的数据，一般为 json 数据// 此处可对 data 作相关处理alert("提交成功！");}});$(this).resetForm(); // 提交后重置表单}return false; // 阻止表单自动提交事件});});</script><body><form action="/servlet/query" method="post" id="myForm"><input type="text" name="userName" id="userName"/><input type="submit" id="btnSubmit" value="提交"/></form></body></html>试下用这个可否解决你的问题，另外jquery-form.js是可用实现form提交回调的；　

使用layer弹出框使用ajax方法：1.你可以自定义按钮，写在你的页面里面2.使用 layer 的按钮的话，按钮的回调函数的参数中有两个参数，一个是弹层的对象，一个是弹层的 index，你可以使用这个弹层的对象读取弹层中的数据，比如 layero.find("xxx").val()

找到一种解决方式现在也知道了怎样来解决跨域问题，余下的就是实现的细节了。实现的过程中错误还是避免不了的。由于不了解json和jsonp两种格式的区别，也犯了错误，google了好久才解决。首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版：$(document).ready(function(){ var url="http://localhost:8080/WorkGroupManagment/open/getGroupById" +"?id=1&callback=?"; $.ajax({ url:url, dataType:"jsonp", processData: false, type:"get", success:function(data){ alert(data.name); }, error:function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); }}); });这样写是完全没有问题的，起先error的处理函数中仅仅是alert(“error”)，为了进一步弄清楚是什么原因造成了错误，故将处理函数变 为上面的实现方式。最后一行alert使用为；parsererror。百思不得其解，继续google，最终还是在万能的stackoverflow找 到了答案，链接在这里。原因是jsonp的格式与json格式有着细微的差别，所以在server端的代码上稍稍有所不同。比较一下json与jsonp格式的区别：json格式：{ "message":"获取成功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"}}jsonp格式：callback({ "message":"获取成功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"}})看出来区别了吧，在url中callback传到后台的参数是神马callback就是神马，jsonp比json外面有多了一层，callback()。这样就知道怎么处理它了。于是修改后台代码。后台java代码最终如下：@RequestMapping(value = "/getGroupById") public String getGroupById(@RequestParam("id") Long id, HttpServletRequest request, HttpServletResponse response) throws IOException { String callback = request.getParameter("callback"); ReturnObject result = null; Group group = null; try { group = groupService.getGroupById(id); result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS); } catch (BusinessException e) { e.printStackTrace(); result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED); } String json = JsonConverter.bean2Json(result); response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); out.print(callback + "(" + json + ")"); return null; }注意这里需要先将查询结果转换我json格式，然后用参数callback在json外面再套一层，就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。虽然这样解决了跨域问题，还是回顾下造成parsererror的原因。原因在于盲目的把json格式的数据当做jsonp格式的数据让ajax处理，造成了这个错误，此时server端代码是这样的：@RequestMapping(value = "/getGroupById") @ResponseBody public ReturnObject getGroupById(@RequestParam("id") Long id, HttpServletRequest request, HttpServletResponse response){ String callback = request.getParameter("callback"); ReturnObject result = null; Group group = null; try { group = groupService.getGroupById(id); result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS); } catch (BusinessException e) { e.printStackTrace(); result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED); } return result; }至此解决ajax跨域问题的第一种方式就告一段落。

ajax成功后，在 each里的$("<img/>")，是建立一个新的img，紧接着下面的 $("img")是啥意思？取刚建立的img吗？这么写是取不到的。那是取所有的图片？写到each里重复的绑定所有img，也有点诡异。把id传递其实可以建立一个全局变量，例如在jquery之外，也就是脚本刚开始（ document.ready 之外 ），var id_sent, 然后每次传递id的时候，就把id写到 id_sent里，然后取值即可，因为全局变量一直都好使。

先在list = indexList;后面添加打印语言alert(indexList)看看取回来的东西是不是正确的如果是undefined那么可能是jquery的ajax写的有问题，或者是注意请求的地址路径是否正确先咱先确定是否该函数能顺利的被解析并执行。

　　ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。　　最简单的情况下，$.ajax() 可以不带任何参数直接使用。　　注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。　　语法　　jQuery.ajax([settings])　　参数　　描述　　settings　　可选。用于配置 Ajax 请求的键值对集合。　　可以通过 $.ajaxSetup() 设置任何选项的默认值。　　　　参数　　options　　类型：Object　　可选。AJAX 请求设置。所有选项都是可选的。　　async　　类型：Boolean　　默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。　　注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。　　beforeSend(XHR)　　类型：Function　　发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。　　XMLHttpRequest 对象是唯一的参数。　　这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。　　cache　　类型：Boolean　　默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。　　jQuery 1.2 新功能。　　complete(XHR, TS)　　类型：Function　　请求完成后回调函数 (请求成功或失败之后均调用)。　　参数： XMLHttpRequest 对象和一个描述请求类型的字符串。　　这是一个 Ajax 事件。　　contentType　　类型：String　　默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。　　默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。　　context　　类型：Object　　这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。　　就像这样：　　$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); }});　　data　　类型：String　　发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。　　dataFilter　　类型：Function　　给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。　　dataType　　类型：String　　预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:　　"xml": 返回 XML 文档，可用 jQuery 处理。　　"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。　　"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）　　"json": 返回 JSON 数据 。　　"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。　　"text": 返回纯文本字符串　　error　　类型：Function　　默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。　　有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。　　如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。　　这是一个 Ajax 事件。　　global　　类型：Boolean　　是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。　　ifModified　　类型：Boolean　　仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 "etag" 来确定数据没有被修改过。　　jsonp　　类型：String　　在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:"onJsonPLoad"} 会导致将 "onJsonPLoad=?" 传给服务器。　　jsonpCallback　　类型：String　　为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。　　password　　类型：String　　用于响应 HTTP 访问认证请求的密码　　processData　　类型：Boolean　　默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。　　scriptCharset　　类型：String　　只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。　　success　　类型：Function　　请求成功后的回调函数。　　参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。　　这是一个 Ajax 事件。　　traditional　　类型：Boolean　　如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。　　timeout　　类型：Number　　设置请求超时时间（毫秒）。此设置将覆盖全局设置。　　type　　类型：String　　默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。　　url　　类型：String　　默认值: 当前页地址。发送请求的地址。　　username　　类型：String　　用于响应 HTTP 访问认证请求的用户名。　　xhr　　类型：Function　　需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。　　回调函数　　如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。　　beforeSend　　在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。　　error　　在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）　　dataFilter　　在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。　　success　　当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。　　complete　　当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。

由 于前少写前端代码(哈哈合格程序员啊)近项目用json作系统间交互手段自伴随着众ajax请求随要解决 ajax跨域问题本篇讲述白遇跨域知道跨域问题知道跨域问题知道何解决再解决跨域问题找两种解决ajax 跨域问题全程 知跨域问题 起 复用减少重复发单独发用户权限管理系统共其系统获取认证与授权信息暂且称A系统；调用A系统B例B系统 用ajax调用A系统系统接口(数据格式json)特别困惑A系统访问相应url返json数据B系统使用 ajax请求同url则点反应都没像都没发反反复复改改久都没能解决于求救同事提醒能ajax跨域问 题于问题做跨域问题解决 知跨域知何解决 知道问题确切原剩找解决问题google久再同事指点知道jQueryajaxjsonp属性用解决跨域问题 找种解决式 现知道解决跨域问题余实现细节实现程错误避免由于解jsonjsonp两种格式区别犯错误google久才解决 首先看看页面何使用jQueryajax解决跨域问题简单版： 复制代码 $(document).ready(function(){ var url="中国//localhost:8080/WorkGroupManagment/open/getGroupById" +"?id=1&callback=?"; $.ajax({ url:url, dataType:"jsonp", processData: false, type:"get", success:function(data){ alert(data.name); }, error:function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); }}); }); 复制代码 写完全没问题起先error处理函数仅仅alert(error)进步弄清楚原造错误故处理函数变 面实现式行alert使用；parsererror百思其解继续google终万能stackoverflow找 答案链接原jsonp格式与json格式着细微差别所server端代码稍稍所同 比较json与jsonp格式区别： json格式： { "message":"获取功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"} } jsonp格式： callback({ "message":"获取功", "state":"1", "result":{"name":"工作组1","id":1,"description":"11"} }) 看区别吧urlcallback传台参数神马callback神马jsonp比json外面层callback()知道处理于修改台代码 台java代码终： 复制代码 @RequestMapping(value = "/getGroupById") public String getGroupById(@RequestParam("id") Long id, HttpServletRequest request, HttpServletResponse response) throws IOException { String callback = request.getParameter("callback"); ReturnObject result = null; Group group = null; try { group = groupService.getGroupById(id); result = new ReturnObject(group, "获取功", Constants.RESULT_SUCCESS); } catch (BusinessException e) { e.printStackTrace(); result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED); } String json = JsonConverter.bean2Json(result); response.setContentType("text/html"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); out.print(callback + "(" + json + ")"); return null; } 复制代码 注意需要先查询结转换我json格式用参数callbackjson外面再套层变jsonp指定数据类型jsonpajax做进步处理 虽解决跨域问题顾造parsererror原原于盲目json格式数据做jsonp格式数据让ajax处理造错误server端代码： 复制代码 @RequestMapping(value = "/getGroupById") @ResponseBody public ReturnObject getGroupById(@RequestParam("id") Long id, HttpServletRequest request, HttpServletResponse response){ String callback = request.getParameter("callback"); ReturnObject result = null; Group group = null; try { group = groupService.getGroupById(id); result = new ReturnObject(group, "获取功", Constants.RESULT_SUCCESS); } catch (BusinessException e) { e.printStackTrace(); result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED); } return result; } 复制代码 至解决ajax跨域问题第种式告段落 追加种解决式 追求永止境google程意发现专门用解决跨域问题jQuery插件-jquery-jsonp 第种式基础使用jsonp插件比较简单server端代码需任何改 看何使用jquery-jsonp插件解决跨域问题吧 复制代码 var url="中国//localhost:8080/WorkGroupManagment/open/getGroupById" +"?id=1&callback=?"; $.jsonp({ "url": url, "success": function(data) { $("#current-group").text("前工作组:"+data.result.name); }, "error": function(d,msg) { alert("Could not find user "+msg); } })

跨域了，亲

本文实例讲述了jquery中ajax使用error调试错误的方法。分享给大家供大家参考。具体分析如下：JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，我们在Ajax项目中，遇到ajax异步获取数据出错怎么办，我们可以通过捕捉error事件来获取出错的信息。jquery中ajax的常用用法类似于：$(document).ready(function(){jQuery("#clearCac").click(function(){jQuery.ajax({url:url,type:"post",data:{id:"0"},dataType:"json",success:function(msg){alert(msg);},error:function(XMLHttpRequest,textStatus,errorThrown){alert(XMLHttpRequest.status);alert(XMLHttpRequest.readyState);alert(textStatus);},complete:function(XMLHttpRequest,textStatus){this;//调用本次AJAX请求时传递的options参数}});});});当通过ajax异步调用成功时，会调用success函数。success函数语法为：//请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态function(data,textStatus){//datacouldbexmlDoc,jsonObj,html,text,etc...this;//theoptionsforthisajaxrequest}当通过ajax异步调用出错时，会调用error函数。error函数语法为：//(默认:自动判断(xml或html))请求失败时调用时间。//参数有以下三个：XMLHttpRequest对象、错误信息、（可选）捕获的错误对象。//如果发生了错误，错误信息（第二个参数）除了得到null之外，//还可能是"timeout","error","notmodified"和"parsererror"。//textStatus:"timeout","error","notmodified"和"parsererror"。error：function(XMLHttpRequest,textStatus,errorThrown){}error事件返回的第一个参数XMLHttpRequest：XMLHttpRequest.readyState:状态码的意思0－（未初始化）还没有调用send()方法1－（载入）已调用send()方法，正在发送请求2－（载入完成）send()方法执行完成，已经接收到全部响应内容3－（交互）正在解析响应内容4－（完成）响应内容解析完成，可以在客户端调用了发送error可能有下面两张引起的，或者其他程序问题，需要我们认真仔细。1、data:"{}",data为空也一定要传"{}"；不然返回的是xml格式的。并提示parsererror.2、parsererror的异常和Header类型也有关系。及编码header("Content-type:text/html;charset=utf8");希望本文所述对大家的jQuery程序设计有所帮助。

1、定义和用法ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。最简单的情况下，$.ajax() 可以不带任何参数直接使用。2、语法jQuery.ajax([settings])setting参数：options类型：Object可选。AJAX 请求设置。所有选项都是可选的。async类型：Boolean默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。beforeSend(XHR)类型：Function发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。cache类型：Boolean默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。jQuery 1.2 新功能。complete(XHR, TS)类型：Function请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述请求类型的字符串。这是一个 Ajax 事件。contentType类型：String默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。context类型：Object这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。就像这样：$.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done");}});data类型：String发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。dataFilter类型：Function给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。dataType类型：String预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:"xml": 返回 XML 文档，可用 jQuery 处理。"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）"json": 返回 JSON 数据 。"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。"text": 返回纯文本字符串error类型：Function默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。这是一个 Ajax 事件。global类型：Boolean是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。ifModified类型：Boolean仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 "etag" 来确定数据没有被修改过。jsonp类型：String在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:"onJsonPLoad"} 会导致将 "onJsonPLoad=?" 传给服务器。jsonpCallback类型：String为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。password类型：String用于响应 HTTP 访问认证请求的密码processData类型：Boolean默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。scriptCharset类型：String只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。success类型：Function请求成功后的回调函数。参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。这是一个 Ajax 事件。traditional类型：Boolean如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。timeout类型：Number设置请求超时时间（毫秒）。此设置将覆盖全局设置。type类型：String默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。url类型：String默认值: 当前页地址。发送请求的地址。username类型：String用于响应 HTTP 访问认证请求的用户名。xhr类型：Function需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。回调函数如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。beforeSend在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。error在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）dataFilter在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。success当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。complete当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。