学习使我快乐！嘿

　　　　　　　　　　　　　　　　--WZY

一、jQuery使用Ajax

　　　　想要了解jQuery如何使用Ajax，并且体会到它所带来的方便性，那么就得了解原始的Ajax是如何编写的，是怎样的繁琐，然后和Jquery的代码进行对比，才会有所悟。

　　　　1.1、什么是Ajax？(顺带提一下)

　　　　　　　全名：Asynchronous Javascript And Xml[异步javascript和xml]，

　　　　　　　同步和异步原理图

　　　　　　　　　　同步就是浏览器发送一个请求到服务器端，网址会改变，页面会被重新加载到新的页面。如图

　　　　　　　　　　　　　　　　

　　　　　　　　　　异步就是浏览器发送一个请求到服务器端，网址不会改变，并且页面只是局部刷新数据，能够接收服务器返回的数据，如果需要完成这样一个异步的过程，就需要使用Ajax技术，依靠Ajax引擎(XMLHttpRequest)，原理如图

　　　　　　　　　　　　　　　　

　　　　　　　　Ajax是什么现在就应该知道了，看上面讲解异步的原理就懂了，总结一句话，Ajax使用异步的方式从浏览器端发送请求，请求服务器端资源，并获得内容的一种技术。　　

　　　　1.2、原始Ajax的用法。

　　　　　　　　如果编写原始Ajax，那么就要总的分为4步，如下图

　　　　　　　　　　　　　　　　

　　　　　　　　第一步：获取Ajax引擎

　　　　　　　　　　　　　　　　

　　　　　　　　第二步：通过Ajax引擎执行回调函数，用来接收服务器端返回回来的数据。

　　　　　　　　　　　　　　　　

　　　　　　　　第三步：Ajax引擎创建与服务器端的连接

　　　　　　　　　　　　　　　　

　　　　　　　　第四步：发送请求到服务器，并且顺带将数据传输过去

　　　　　　　　　　　　　　　　

　　　　　　　　总结：注意第三步和第四步中post请求和get请求的区别，如果是post请求，则需要加第三步中的65行代码，并且所传输到服务器端的请求参数必须放在第四步的73行代码中。如果是get请求的话，请求参数就直接放在第三步的62行代码中(参考第三步的56行解释)，并且第三步中的65行代码就不需要了，还有第四步中的73行代码就不需要带请求参数过去，参考70.71的注释。

　　　　　　　　粘帖一份Ajax发送请求，并接收服务器端的数据的代码，供参考。谢谢

  1.     <script type="text/javascript">
  2.         function sendData(obj){
  3.             //alert("失去焦点");
  4.             //1 当失去焦点时，获得用户输入的内容 ，obj 等效 document.getElementById("xxx")
  5.             var inputVal = obj.value;
  6.  
  7.             /* 2.1 创建核心类 */
  8.             var xmlhttp=null;
  9.             if (window.XMLHttpRequest){// code for all new browsers
  10.               xmlhttp=new XMLHttpRequest();
  11.             } else if (window.ActiveXObject) {// code for IE5 and IE6
  12.               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  13.             }
  14.             // 2.2 设置回调
  15.             xmlhttp.onreadystatechange = function(){
  16.                 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
  17.                     // 3.1 接收服务器响应的数据 ，获得json数据，注意json也是文本
  18.                     var data = xmlhttp.responseText;
  19.                     // 3.2 将字符串 转换  json 对象
  20.                     // 如果字符串 转换 json 对象时不成功，使用格式：eval("('abc')");
  21.                     var jsonData = eval("("+data+")");
  22.  
  23.                     // 3.3 判断 --控制按钮是否可用
  24.                     var buttonObj = document.getElementById("buttonId");
  25.                     var spanObj = document.getElementById("spanId");
  26.                     if(jsonData.flag){
  27.                         //可用
  28.                         buttonObj.removeAttribute("disabled");
  29.                         spanObj.style.color = "#3D882D";
  30.                     } else {
  31.                         //占用
  32.                         buttonObj.setAttribute("disabled","disabled");
  33.                         spanObj.style.color = "#CC0000";
  34.                     }
  35.  
  36.                     // 3.4 到指定的位置显示
  37.  
  38.                     spanObj.innerHTML = jsonData.msg;
  39.  
  40.                 }
  41.             };
  42.             // 2.3 连接
  43.             xmlhttp.open("POST","/day21/Demo04Servlet");
  44.  
  45.             // * 设置编码
  46.             xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  47.  
  48.             // 2.4 发送
  49.             xmlhttp.send("username=" + inputVal);
  50.  
  51.         }
  52.  
  53.     </script>
  54. </head>
  55. <body>
  56.     <%--
  57.     <form action="" enctype="application/x-www-form-urlencoded"></form>
  58.     --%>
  59.     用户名：<input type="text" name="username" onblur="sendData(this)" /> <span id="spanId"></span> <br/>
  60.     密码：<input type="password" name="password" /> <br/>
  61.     <input id="buttonId" type="button" value="点我" />

Ajax原始代码

　　　　1.3、jQuery使用Ajax

　　　　　　1.3.1、Ajax请求

　　　　　　　　　　　　

　　　　　　　　第一层，最原始层，$.ajax ,一般不使用，完成更强大功能时需要使用。例如：如果出错了，给出提示　

　　　　　　　　第二层，load、$.get 、$.post  开发中常使用用于处理ajax　

　　　　　　　　第三层，$.getJSON  $.getScript  优化辅助

　　　　　　　　一行代码搞定。但是jQuery使用Ajax有很多种用法，现在一一来介绍。

　　　　　　　　1、load的用法

　　　　　　　　　　　　必须在jQuery对象上触发函数，发送ajax请求

　　　　　　　　　　　　格式：load(url, [data], [callback])

　　　　　　　　　　　　　　　url：请求路径

　　　　　　　　　　　　　　　data：请求参数。参数格式为JSON　　

　　　　　　　　　　　　　　　　　如果有参数，将是POST请求　

　　　　　　　　　　　　　　　　　如果没有参数，将是GET请求　

　　　　　　　　　　　　　　　callback：成功之后回调，具有三个参数

　　　　　　　　　　　　　　　　　第一个参数：返回值(一般为json，看返回的是什么)

　　　　　　　　　　　　　　　　　第二个参数：状态，其值可能是succuss，error，notmodify，timeout

　　　　　　　　　　　　　　　　　第三个参数：ajax引擎XMLHttpRequest

　　　　　　　　　　　　实例：

　　　　　　　　　　　　　　　OneServlet:服务器端响应

　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　客户端发送ajax请求

　　　　　　　　　　　　　　　　　　

  1.     $(function(){
  2.         $("input").click(function(){
  3.             var url = "/jQuery_test/OneServlet";//请求服务器端地址
  4.             /*
  5.                 load(url, [data], [callback])
  6.                 有data，所以是post请求
  7.                 callback中有一个参数，那么就是其返回值对象，返回值类型是什么，
  8.                 取决于服务器返回的是什么，如果是json数据，那么需要通过21行
  9.                 代码进行转换。
  10.             */
  11.             var data = {"username":"jack"};
  12.             $(this).load(url,data,function(data){
  13.                 //需要手动转成json对象
  14.                 var jsonData = eval("("+data+")");
  15.                 alert("成功" + jsonData.info);
  16.             });
  17.         });
  18.     });

load方式加载ajax代码

　　　　　　　　2、$.get方式

　　　　　　　　　　　　发送的就是get请求

　　　　　　　　　　　　格式：jQuery.get(url, [data], [callback], [type])

　　　　　　　　　　　　　　　前三个参数和load方式一样

　　　　　　　　　　　　　　　type：返回内容格式，xml, html, script, json, text, _default(默认为json格式)　　

　　　　　　　　　　　　实例：　

　　　　　　　　　　　　　　　服务器端

　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　客户端

　　　　　　　　　　　　　　　　　　

  1.     $(function(){
  2.         $("input").click(function(){
  3.             var url = "/jQuery_test/OneServlet";//请求服务器端地址
  4.             /*
  5.                 jQuery.get(url, [data], [callback], [type])
  6.  
  7.             */
  8.             var params = {"username":"jack"};
  9.             //2 $.get  获得数据为json对象
  10.             // * 当发送数据位字符串时，通过第四个参数设置类型
  11.             // * 服务器端可以通过 MIME类型 确定发送JSON数据
  12.                 $.get(url,params,function(data){
  13.                     alert(data.success);
  14.                 },"json");
  15.         });
  16.     });

$.get方式

　　　　　　　　3、$.post方式

　　　　　　　　　　　　跟$.get完全类似。

　　　　　　　　　　　　发送post请求

　　　　　　　　　　　　格式：jQuery.post(url, [data], [callback], [type])

　　　　　　　　　　　　不做解释。一样的。

　　　　　　　　4、$.ajax方式

　　　　　　　　　　　　底层原始ajax请求方式，出错了，给出提示

　　　　　　　　　　　　常用格式：jQuery.ajax(settings);  使用json格式设置多项数据

　　　　　　　　　　　　看实例就懂了。

　　　　　　　　　　　　服务器端：雷同，不写了。

　　　　　　　　　　　　客户端

　　　　　　　　　　　　　　　　

  1.                 //4 $.ajax
  2.                 // * async 设置是否异步，true：表示异步（ajax）
  3.                 // * type 设置请求方式。例如：get、post
  4.                 // * url 设置请求路径
  5.                 // * data 请求参数
  6.                 // * dataType 设置数据转换类型，例如：xml, html, script, json
  7.                 // * success  成功回调
  8.                 // * error 错误回调
  9.                 $.ajax({
  10.                     "async":true,
  11.                     "type":"POST",
  12.                     "url":url,
  13.                     "data":params,
  14.                     "success":function(data){
  15.                         alert(data);
  16.                     },
  17.                     "error" : function(){
  18.                         alert("错误");
  19.                     }
  20.                 });

$.ajax方式

　　　　1.3.2、表单序列化

　　　　　　　　

　　　　　　　　serialize() 将表单中所有内容转成字符串

　　　　　　　　　　所有内容：有name，有值（非空）--文本有数据，单选多选选中，下拉列表选中等

　　　　　　　　　　字符串：key=value&key=value&....

　　　　　　　　　　应用场景：$.get，当get请求时，将所有表单元素的内容都发送到服务器端时，不用一个一个拼接，直接使用该函数就搞定了。

　　　　　　　　serializeArray()将表单中所有内容转成json数组

　　　　　　　　

　　　　　　　　serialize()例子

　　　　　　　　　　　　核心代码。

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　表单代码如下

  1.     <h3>表单</h3>
  2.     <form action="">
  3.         <table border="1" >
  4.             <tr id="tr1">
  5.                 <td class=""><label>姓名</label></td>
  6.                 <td><input type="text" name="username" class="textClass" value="jack" /></td>
  7.             </tr>
  8.             <tr>
  9.                 <td class=""><span>密码</span></td>
  10.                 <td><input type="password" name="password" value="1234" /></td>
  11.             </tr>
  12.             <tr>
  13.                 <td>性别</td>
  14.                 <td>
  15.                     <input type="radio" name="gender" value="男" />男
  16.                     <input type="radio" name="gender" value="女" checked="checked" />女
  17.                 </td>
  18.             </tr>
  19.             <tr id="tr4">
  20.                 <td>爱好</td>
  21.                 <td>
  22.                     <input type="checkbox" name="hobby" value="1"/>抽烟
  23.                     <input type="checkbox" name="hobby" value="2" checked="checked"/>喝酒
  24.                     <input type="checkbox" name="hobby" value="3" checked="checked"/>烫头
  25.                 </td>
  26.             </tr>
  27.             <tr>
  28.                 <td>我的照片</td>
  29.                 <td><input type="file" name="image" /></td>
  30.             </tr>
  31.             <tr>
  32.                 <td>学历</td>
  33.                 <td>
  34.                     <select name="edu">
  35.                         <option value="1">小班</option>
  36.                         <option value="2" selected="selected">中班</option>
  37.                         <option value="3">大班</option>
  38.                         <option value="4">学前班</option>
  39.                     </select>
  40.                 </td>
  41.             </tr>
  42.             <tr>
  43.                 <td></td>
  44.                 <td>
  45.                     <button type="button" id="buttonId">普通按钮</button>
  46.                     <input type="submit" value="提交按钮" />
  47.                     <input type="reset" value="重置按钮" />
  48.                     <input type="image" value="图片按钮" src="" style="height: 30px;width: 50px" />
  49.                 </td>
  50.             </tr>
  51.         </table>
  52.     </form>
  53.  
  54.     <h3>公告信息</h3>
  55.     <div>
  56.         未满18慎进
  57.     </div>

　　　　　　　　　　　　结果如图

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　看打印的结果，用&拼接而成，就是在get请求参数时放在url后面的格式，所以该应用场景是在$.get时。

　　　　　　　　serializeArray()实例。

　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　结果

　　　　　　　　　　　　　　　　　　　　

二、总结

　　　　　　复习了一下什么是Ajax，原始的Ajax的编写(4步)，然后使用jQuery对象来编写ajax(一行代码搞定);使用jQuery的话，要注意服务器端返回json数据时，json数据格式要正确。拒绝错误的编写格式。比如"{'xx':'yy'}"或者"{'xx':xx}"这两种都是错误的格式，

　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　但是在返回的是字符串时，可以使用"{'XX':XX"}",然后在页面使用eval进行转换即可。

　　　　　　下一节会讲解一下javascript的跨域数据传输问题(原始方法实现和使用jQuery实现)

jQuery(二) jQuery对Ajax的使用的更多相关文章

  1. jQuery deferred应用之ajax详细源码分析（二）

    在上一节中,我只贴出了$.Deferred的源码分析,并没用讲解怎么使用它,现在我们先看看$.ajax是如何使用它,让我们进行异步任务的处理. 如果没看上节的代码,请先稍微了解一下jQuery Def ...

  2. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

  3. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  4. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  5. Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数:  ...

  6. 转载 ： Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结 投稿:jingxian 字体:[增加 减小] 类型:转载 时间:2013-11-14我要评论 本文是 ...

  7. jquery下php与ajax的互传数据（json格式）自我总结

    研究了一整天的json数据与ajax的数据传输,现在进行一个小的自我总结,仅供参考 1.关于ajax的认识 $.ajax(),是jquery下包装好的一个函数:参考地址:http://www.w3sc ...

  8. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  9. 从零开始学习jQuery (六) jquery中的AJAX使用

    本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即 ...

随机推荐

  1. 多人合作开发启动activity-----规范问题

    A----FirstActivity button1.setOnClickListener(new OnClickListener() {     @Override     public void ...

  2. 【JAVAWEB学习笔记】07_BootStrap、Viewport介绍

    今天主要学习了BootStrap,viewport的介绍和最后对网站进行了重构 今天晨读单词: Compatible:兼容性 viewport:视口 device:设备 initial:初始化(缩写i ...

  3. iOS自动打包并发布脚本

    假如你的项目目录如下所示: |____AOP | |____AppDelegate.h | |____AppDelegate.m | |____Base.lproj | | |____LaunchSc ...

  4. （高级篇 Netty多协议开发和应用）第十章-Http协议开发应用（基于Netty的HttpServer和HttpClient的简单实现）

    1.HttpServer package nettyHttpTest; import io.netty.bootstrap.ServerBootstrap; import io.netty.chann ...

  5. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  6. More 3D Graphics (rgl) for Classification with Local Logistic Regression and Kernel Density Estimates (from The Elements of Statistical Learning)（转）

    This post builds on a previous post, but can be read and understood independently. As part of my cou ...

  7. centos6.5 ssh免密码登陆

    ssh-keygen -t rsa ssh-copy-id -i ~/.ssh/id_rsa.pub hadoop1

  8. [rctf](web)rcdn 解题分析，知识点总结

    比赛平台关闭了,没有截图,见谅.   解题思路流程: 分析网站结构,看源码,元素审计.发现以下信息. 要得到flag要获得一个pro cdn pro 子域名长度为3到6个字符 存在一个提交ticke页 ...

  9. UX2内核浏览加速技术纲要

    UX2内核是本人负责主要开发的浏览服务项目,其主要目的是为开发者提供一个简单好用.轻便的网络浏览服务.UX2内核的安卓端是基于WebView进行深度优化的,同时欢迎大家使用这个内核用于app页面或浏览 ...

  10. .net、jquery、ajax、wcf实现数据库用户名检测局部刷新

    jquery代码 $(function() { $("#user_name").blur(function(){ var user_name=$("#user_name& ...