JQuery整合Ajax的方式及应用
2015-03-25 16:01
357 查看
JQuery作为一个JavaScript的一个类库,不仅体积小,而且强大,这在之前的所有测试中都是知道的,而Ajax这一个技术又是在提高用户的体验方面是必不可少的,以前,我们都知道,用JavaScript纯粹的手写Ajax的复杂度相对是很大的,要建立Ajax对象,定义发送方式,确定回调函数,输送数据,服务器返回给Ajax,Ajax再应用到当前页面,只是说一下流程,感觉就很麻烦,但是,但我用JQuery的方法去实现Ajax的时候,发现是那么的简单,前提是一定要有Ajax的手写基础才行,之前要用很多的方法才能实现,而现在,仅仅只用Load(),这一个方法就能很简单就的实现,尽管在理解上并没有多大的改善,但是在代码的复杂度上面大大的减少了,我觉得这样更有利于代码的维护,其次,我个人认为,还是一定要对Ajax的内部机制一定要了解,能用原生的JavaScript写出Ajax的代码,然后再去学习JQuery的方法,这样应该会对自己有很大的帮助。下面是我在编程的过中代码的测试实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Jquery整合Ajax</title> <style type="text/css"> #div_1{ width: 200px; height: 200px; background-color: red; } #div_2{ width: 200px; height: 200px; background-color: yellow; } </style> <script type="text/javascript" src="./file/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sub").click(function() { /*这是LOAD的GET方式提交*/ /* $("#div_1").load("Loadprocess.php?"+"usename="+$("#usename").val(),null,function(data,textStatus,xmlHttpRequest){ //这测试这里的时候出现了一个严重的错误,就是取到的usename没有加val(); //回调函数的参数是从服务器会送的数据,数据,状态(4个) Ajax对象 //alert("服务器"+data); //$(this).test(data); });//有数据以post提交,否则以get提交 */ var send_data={"usename":$("#usename").val(),'age':'18'}; /*由上面也可以知道,虽然JSON严谨但是可以允许这种书写形式的*/ //alert(send_data);//这里发送的数据不是串,而是两个对象 $("#div_1").load("Loadprocess.php",send_data,function(data,textStatus,xmlHttpRequest){ var obj=eval("("+data+")");//如果是json数据,需要进行转化 // $(this).test(data); $(this).text(obj.res); }); //从这里可以看到,的页面上面部分可以是多个的。 $("#div_2").load("Loadprocess.php",send_data,function(data,textStatus,xmlHttpRequest){ var obj=eval("("+data+")"); $(this).text(obj.res); }); }); }); </script> </head> <body> <form> <input type="text" name="usename" id="usename"><br/> <input type"password" name="password" id="password"><br/> <input type="button" value="提交" id="sub"> </form> <div id="div_1"></div> <div id="div_2"></div> </body> </html>
相关文章推荐
- 模仿 JQuery的ajax方法$.get,理解js回调函数应用的方式
- SharePoint 2010中的客户端AJAX应用——jQuery的整合与持久化
- SharePoint 2010中的客户端AJAX应用——jQuery的整合与持久化
- jQuery框架学习第六天:jQuery中的Ajax应用
- 使用Asp.net MVC, Jquery, Jquery UI构建基于Ajax的RIA应用.(更新Demo下载)
- JQuery使用Ajax的一个简单应用
- jQuery插件---源代码显示.(Ajax加载方式).
- AJAX示例应用-2(两级菜单的联动)-方式2(服务器以字符串形式执行代码在客户端运行)
- jQuery与Ajax的应用
- jQuery 的Ajax应用(1)--学习篇,内附实例
- jQuery 的Ajax应用(1)--学习篇,内附实例
- jQuery与Ajax的应用(1)
- jquery应用-AJAX推拽分页
- jQuery与Ajax的应用(2)
- jQuery 源代码显示控件 (Ajax加载方式).
- 另一种ASP.NET与Ajax 的实现方式--jQuery
- AJAX示例应用-2(两级菜单的联动)-方式1(服务器以字符串形式返回子类别的id,name)
- Silverlight整合Asp.net AjAX的技术应用
- jQuery与Ajax的应用
- 使用Asp.net MVC, Jquery, Jquery UI构建基于Ajax的RIA应用.