用jquery写了一个超简陋的ajax无刷新聊天室

使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL在访问现在很火的google plus时，细心的用户也许会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。

并且能够很好的支持浏览器的前进和后退。

不禁让人想问，是什么有这么强大的功能呢？HTML5里引用了新的API，就是history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的。

与传统的AJAX的区别传统的ajax有如下的问题：虽然ajax可以无刷新改变页面内容，但无法改变页面URL其次为了更好的可访问性，内容发生改变后，改变URL的hash。

但是hash的方式不能很好的处理浏览器的前进、后退等问题有的浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变再有，ajax的使用对搜索引擎很不友好，往往蜘蛛爬到的区域是空的为了解决传统ajax带来的问题，HTML5里引入了新的API，即：history.pushState, history.replaceState可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。

pushState是将指定的URL添加到浏览器历史里，replaceState是将指定的URL替换当前的URL。

如何调用var state = { title: title, url: options.url, otherkey: othervalue }; window.history.pushState(state, document.title, url);state对象除了要title和url之外，也可以添加其他的数据，比如：还想将一些发送ajax的配置给保存起来。

replaceState和pushState是相似的，不需要多做解释。

jquery中$.ajax（）⽅法使⽤详解1.url说明：发送请求的地址（默认为当前页⾯），要求是String类型的参数，⽐如是.net下，"~wexin(控制器)/getweinxinmenu(动作)"，2.type说明：请求⽅法(post或者get)，默认是get，要求是String类型的参数。

其他的htpp请求如（put、delete）等也⽀持，但是要浏览器⽀持3.timeout说明：设置请求超时时间（毫秒），要求是number类型的参数。

此设置将覆盖$.ajaxSetup()⽅法的全局设置。

4.async说明：默认值为true，所有请求是异步，要求是Bool类型的参数，如果需要发送同步请求，将此项设置为false。

注意：同步时浏览器会被锁住。

5.cache说明：默认为true(当datatype为script时，默认为false)从浏览器缓存中加载请求信息，要求是Bool类型的参数。

6.data说明：发送到服务器的数据，要求是Object或string类型的参数。

如果已经不是字符串，将⾃动转换为字符串格式。

get请求中将附加在url 后。

防⽌这种⾃动转换，可以查看 processData选项。

对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。

如果是数组，JQuery将⾃动为不同值对应同⼀个名称。

例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType:说明：预期服务器返回的数据类型，要求为String类型的参数。

如果不指定，JQuery将⾃动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。

PHP＋AJAX实现无刷新注册（带用户名实时检测）
很多时候，我们在网上注册个人信息，在提交完页面后，总得等待页面刷新来告诉我们注册是否成功，遇到网络差的时候，如果注册了一大串的东西，在经过漫长的等待页面刷新后，得到的确是“您的用户名已被使用”或XXX XXXX不合法，我想大家的心情一定特别不爽，今天就介绍个A JAX实现页面不刷新注册＋实时检测用户信息的简单注册程序，希望对大家有所帮助。

好的，先看注册界面代码：
如图：
红色部分就是一会要调用的js函数了，当我们选定一个文本框后就会开始调用，现在我们看上面那个页面包含的ajaxreg.js文件的代码，里面就是包含了ajax框架和一些判断函数。

不难看出，数据是通过异步传输到checkuserreg.php接着回送回信息显示出来来达到实时检测用户名的目的，至于密码，只作了长度的实时判断，有兴趣的朋友可以扩充功能。

来看下checkuserreg.php到底都做了什么：
注释写的还算详细，大家应该都能看懂，再看信息合法后我们提交注册信息实现无刷新注册的PHP代码,se nduserinfo.php：
OK！！大功告成，来看看效果图：1.
2.
3.
4.
5.
怎么样？还不错吧，贴了这么多累死了，希望大家喜欢～～～～。

ajax格式及用法Ajax（AsynchronousJavaScriptandXML）是一种使用客户端脚本（通常是JavaScript）与服务器交互的强大技术。

通过Ajax，我们可以实现异步的、基于事件的、基于浏览器的数据请求，从而极大地提高了网页的交互性和响应性。

本篇文章将详细介绍Ajax的格式及用法。

一、Ajax请求格式Ajax请求的基本格式如下：`XMLHttpRequest对象.open(method,url,async,user,password);`其中，method表示请求方法，如GET或POST；url表示请求的URL；async表示是否异步请求，通常为true；user和password用于HTTP认证。

在请求中，我们通常会发送一些数据，这些数据可以以查询字符串的形式附加在URL之后，也可以作为POST请求的数据主体发送。

这些数据可以通过JavaScript对象来创建，或者从XML、JSON或其他数据源获取。

二、Ajax请求示例以下是一个简单的AjaxGET请求示例：`varxhr=newXMLHttpRequest();xhr.open("GET","data.json",true);xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){//请求成功，将返回的数据处理成JSON格式并输出到consolevardata=JSON.parse(xhr.responseText);console.log(data);}};xhr.send();`在这个示例中，我们创建了一个新的XMLHttpRequest对象，并打开了到"data.json"的GET请求。

当请求状态改变时，我们检查请求是否成功，并使用JSON.parse将返回的文本转换为JSON格式。

实例通过 AJAX 加载一段文本： jQuery 代码： $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"",async:false}); $("#myDiv").html(htmlobj.responseText); }); });HTML 代码： <div id="myDiv"><h2>321 导航</h2></div> <button id="b01" type="button"></button>亲自试一试定义和用法ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。

简单易用的高层实现见 $.get, $.post 等。

$.ajax() 返回其创建 的 XMLHttpRequest 对象。

大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获 得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

语法jQuery.ajax([settings])参数 settings描述 可选。

用于配置 Ajax 请求的键值对集合。

可以通过 $.ajaxSetup() 设置任何选项的默认值。

参数 options 类型：Object可选。

AJAX 请求设置。

所有选项都是可选的。

async 类型：Boolean 默认值: true。

默认设置下，所有请求均为异步请求。

如果需要发送同步请求，请将此选项设 置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

jq ajax 写法在使用jQuery 的Ajax 功能发送异步请求时，可以使用$.ajax() 方法。

以下是一个常见的jQuery Ajax 的写法示例：javascriptCopy Code$.ajax({url: 'your-url', // 请求的URLmethod: 'POST', // 请求方法，可以是GET、POST等data: { key1: 'value1', key2: 'value2' }, // 请求参数dataType: 'json', // 服务器返回的数据类型，这里设置为JSONsuccess: function(response) {// 请求成功时的回调函数console.log(response); // 输出服务器返回的数据},error: function(xhr, status, error) {// 请求失败时的回调函数console.log(error); // 输出错误信息}});在上述代码中，使用$.ajax() 方法发送一个POST 请求到指定的URL，并传递一些参数。

url 属性指定请求的URL，method 属性指定请求的方法（如GET 或POST），data 属性指定请求的参数。

dataType 属性指定了服务器返回的数据类型，这里设置为JSON。

success 属性指定了请求成功时的回调函数，当服务器成功返回数据时，该函数会被调用。

在示例中，我们将返回的数据打印到控制台。

error 属性指定了请求失败时的回调函数，当请求发生错误时，该函数会被调用。

在示例中，我们将错误信息打印到控制台。

你可以根据自己的需求修改示例代码中的URL、请求方法、参数和回调函数，以及处理返回数据的逻辑。

JQuery中的AJAX详解目录(?)[-]load()方法load(url,[data],[callback])url为被加载的页面地址data表示发送到服务器的数据，格式为key/valuecallback格式为：function(responseText,textStatus,XMLHttpRequest){ }//responseText:请求返回的内容//textStatus:请求状态：success、error、notmodified、timeout这4种//XMLHttpRequest:XMLHttpRequest对象load()方法的传递方式根据参数data来自动指定。

如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST 方式[javascript]view plaincopyprint?1.$("#div1").load(2."jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass"，则表示获取jsp页面中类名为filterClass的全部元素3.{4. name ：clf, age : 255.//经测试，变量名加引号、单引号、不加引号，后台都能取到值6.//如果含有中文，必须用encodeURI()进行编码，然后再服务器端用decodeURI()解码即可，如7.// {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()},8.}, //也可以用数组传值，{"attr []",["clf","25","male"]}9.function (){10. $("#div2").text("AJAX");11.}12.);[javascript]view plaincopyprint?1.$("div").load("wrongname.xml",function(response,status,xhr){2.if (status=="success")3. {4. $("div").html("<ol></ol>");5. $(response).find("artist").each(function(){6. <span style="white-space:pre"> </span>varitem_text = $(this).text();7. <span style="white-space:pre"> </span>$('<li></li>').html(item_text).appendTo('ol');8. <span style="white-space:pre"> </span> });9. }10.else11. {12. $("div").html("Anerror occured: <br/>" + xhr.status + " " + xhr.statusText)13. }14. });getJSON()方法getJSON(url,[data],[callback])callback格式为function(data,textStatus) { }data是一个返回的json对象[javascript]view plaincopyprint?1.$.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){2. alert("JSON Data: " +ers[3].name);3.});getScript()方法getScript(url,[callback])callback格式为function(response,status)response - 包含来自请求的结果数据status - 包含请求的状态（"success","notmodified", "error", "timeout" 或"parsererror"）通过此函数注入的脚本会自动执行get()方法get(url,data,callback(response,status,xhr),dataType)dataType可能的类型："xml"、"html" 、"text"、"script"、"json"、"jsonp"get() 方法通过远程HTTPGET 请求载入信息。

jquery table ajax reload的用法在现代的Web开发中，异步JavaScript和XML（AJAX）已经成为了一个不可或缺的部分，它允许我们在不重新加载整个页面的情况下，从服务器获取数据并更新页面的部分内容。

当与jQuery这样的JavaScript库结合使用时，AJAX的功能变得更加强大和易用。

在本文中，我们将详细讨论如何使用jQuery和AJAX来重新加载（reload）HTML表格的内容。

一、了解基础在开始之前，我们需要对jQuery和AJAX有一定的了解。

jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和AJAX交互等Web开发常见任务。

AJAX则是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

二、为什么使用jQuery Table AJAX Reload在Web应用程序中，表格经常被用来展示数据。

当数据发生变化时，我们希望能够实时更新表格的内容，而不是重新加载整个页面。

这时，使用jQuery和AJAX来重新加载表格数据就变得非常有用。

它不仅可以提高用户体验，还可以减少服务器的负载。

三、基本用法假设我们有一个HTML表格，它的ID是“myTable”，并且我们有一个URL，该URL返回表格需要显示的数据。

下面是一个基本的例子，展示了如何使用jQuery和AJAX来重新加载这个表格的内容：$(document).ready(function() {// 定义一个函数来加载表格数据function loadTableData() {$.ajax({url:'your_data_url', // 数据URLtype:'GET', // 请求类型dataType:'json', // 预期服务器返回的数据类型success:function(data) {// 当请求成功时，这里会被执行// 假设data是一个包含表格数据的数组var tableBody =$("#myTable tbody"); // 获取表格的tbody元素tableBody.empty(); // 清空现有的表格内容// 遍历数据并创建表格行$.each(data, function(index, row) {var newRow =$("<tr><td>"+ row.column1+"</td><td>"+ row.column2+"</td></tr>"); tableBody.append(newRow); // 将新行添加到表格中});},error:function(jqXHR, textStatus, errorThrown) {// 当请求失败时，这里会被执行console.error("AJAX error: "+ textStatus +' - '+ errorThrown);}});}// 初始加载表格数据loadTableData();// 可以根据需要，例如定时器、按钮点击事件等，再次调用loadTableData函数来重新加载表格数据});四、进阶用法1. 使用模板引擎：当表格结构变得复杂时，手动拼接HTML字符串可能会变得非常繁琐且容易出错。

jQuery操作Ajax和Json嗯，自己学SSH和做项目也已有两个月了。

自己今天来整理一下自己在项目中利用jQuery操作过的Ajax和Json。

当时我对于jQuery操作Ajax几乎不怎么了解，但是项目中有需求，所以自己也是必须要去使用，因此现在来详细讲解一下自己在项目中的操作。

功能中，有一个下拉框，里面存储的是服务商的信息，首选项是“--请选择--”，当我选择第一个下拉框中服务商信息之后，后面紧接着将会得到这个选定的服务商下的所有产品。

做一个联动操作。

虽然我不会用jQuery操作Ajax，但是我第一反应就是想到利用这块技术，于是自己就开始查找对应的资料了。

首先，我在Action中，将服务商的信息从数据库查找出来，保存到List集合中，将集合转发到JSP界面上，利用的是struts2标签：<div><s:select name="provider.iscenicid"list="#request.providerList"listKey="i scenicid"listValue="szcenicname"headerKey=""headerValue="--请选择"onchange="onChangeOptionScenic(this)"id="scenicType"/></s:select><span id="productInfo"></span></div>（ps:其实这个里面，本不应该设置headerKey和headerValue，应该在Action中在List集合中去增加一行再进行操作。

）中间的span标签就是将要利用jQuery操作Ajax把产品信息增加到span标签里面！其次，进行jQuery操作Ajax了：<script>function onChangeOptionScenic(_this) {// 获取下拉框中的listKey值var iscenic =$(_this).val();// 设置一个变量，来进行下面的操作var htmltv ="";// 设置URL地址var url ="/tips/travelmessage.action";// Ajax操作开始$.ajax ({// 设定URLurl : url,// 设置提交方式，这里为posttype : "post",// 设置数据类型为JsondataType : "json",// 设置传过去的值的属性名data : {"iscenicid" : iscenic},// 成功返回之后的操作方法success : function(result) {// 获取Action中传回来的result的值var json =eval("("+result+")");// 循环将服务商下的产品以复选框形式拼接出来for(var i=0; i<json.length; i++) {// 将产品信息以复选框形式拼接起来htmltv +="<input type='checkbox' name='productNa me'value='"+json[i].productId+"'/>"+json[i].prod uctName;}// 添加到上面的span标签中$("#productInfo").val(htmltv);}});}</script>最后，将result进行一个映射文件的配置，配置信息如下（根据公司的一些设定而操作）：<action name="travelmessage"class="com.web.system.tips.TravelMessageAction" method="trav elMessage"><result type="json"><param name="root">result</param></result></action>在TravelMessageAction中，需要将内容返回到result中，部分代码如下：List productList = travelMessageService.getProductInfo(product);JSONArray json =new JSONArray().fromObject(productList);result = json.toString();return SUCCESS;至此，一个完整的操作已完成，这就是自己的一点点整理，希望以后有更多的有技术的知识与大家分享！。