这篇博文主要通过一个简单的Ajax应用来解析一下Ajax技术的原理。
首先需要三个文件，simpleAjax.hml(用来看效果)，simpleAjax.js(用JavaScript中的XMLHttpRequest对象来直接与服务器进行通信)，simpleAjax.txt(可以自定义异步通信输出内容的文件)。
1 新建simpleAjax.html文件
| 代码如下 | 复制代码 |
|
<html><head><title>一个简单的Ajax应用</title><script type="text/javascript" src="simpleAjax.js"></script></head><body><input type="button" value="Ajax请求" onclick="startrequest()"/><div id="responseResult"></div> </body></html> |
|
2 新建simpleAjax.js文件
| 代码如下 | 复制代码 |
|
var xmlhttp=null;//首先创建一个作为 XMLHttpRequest 对象使用的 xmlhttp 变量,值设为 null function createXMLHttpRequest(){ if (window.XMLHttpRequest) {xmlhttp=new XMLHttpRequest();//针对 IE7+, Firefox, Chrome, Opera, Safari } else if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//针对 IE6, IE5 } } function startrequest(){//由simpleajax.html中的按钮点击调用这个函数 function handlestatechange(){ |
|
名称解释：
2.1 第一个函数 createXMLHttp() 的作用是根据客服端浏览器类型（IE和非IE）以及IE中安装的JavaScript技术版本的不同创建不同的XMLHttpRequest对象。XMLHttpRequest对象用于在后台与服务器交换数据。它能够：在不重新加载页面的情况下更新网页、在页面已加载后从服务器请求数据、在页面已加载后从服务器接收数据、在后台向服务器发送数据。
2.2 其中 xmlhttp.onreadystatechange 表示每当存有xmlhttprequest的状态信息的readyState改变时，就会触发 这个onreadystatechange 事件。当 readyState 等于 4 且状态为 200 时，表示响应已就绪。
2.3 其中 xmlhttp:open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword) 表示创建一个新的http请求(bstrUrl)，并指定此请求的方法(get,post)、URL以及varAsync布尔型，指定此请求是否为异步方式，默认为true即当状态改变时会调用onreadystatechange属性指定的回调函数。
2.4 其中 xmlhttp.send() 表示发送请求到http服务器并接收回应。
3 新建simpleajax.txt文件
任意在这个txt文件里面写入内容，例如： hello,i have changed myself! 。
上面都是ajax原生态的写法，下面我们来看个jquery的做法
jQuery Ajax 实例 ($.ajax、$.post、$.get)
$.post、$.get是一些简单的方法，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()
一、$.ajax的一般格式
| 代码如下 | 复制代码 |
|
$.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType });
|
|
二、$.ajax的参数描述
参数描述
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType 可选。规定预期的服务器响应的数据类型。
默认执行智能判断（xml、json、script 或 html）。
三、$.ajax需要注意的一些地方：
1.data主要方式有三种，html拼接的，json数组，form表单经serialize()序列化的；通过dataType指定，不指定智能判断。
2.$.ajax只提交form以文本方式，如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit
| 代码如下 | 复制代码 |
|
//1.$.ajax带json数据的异步请求 var aj = $.ajax( { url:'productManager_reverseUpdate',// 跳转到 action data:{ selRollBack : selRollBack, selOperatorsCode : selOperatorsCode, PROVINCECODE : PROVINCECODE, pass2 : pass2 }, type:'post', cache:false, dataType:'json', success:function(data) { if(data.msg =="true" ){ // view("修改成功！"); alert("修改成功！"); window.location.reload(); }else{ view(data.msg); } }, error : function() { // view("异常！"); alert("异常！"); } }); //2.$.ajax序列化表格内容为字符串的异步请求 //3.$.ajax拼接url的异步请求 //4.$.ajax拼接data的异步请求 |
|