一些简单的Ajax应用实例使用说明

作者：袖梨 2022-11-14

这篇博文主要通过一个简单的Ajax应用来解析一下Ajax技术的原理。
首先需要三个文件，simpleAjax.hml(用来看效果)，simpleAjax.js(用JavaScript中的XMLHttpRequest对象来直接与服务器进行通信)，simpleAjax.txt(可以自定义异步通信输出内容的文件)。

1 新建simpleAjax.html文件

代码如下

复制代码

一个简单的Ajax应用

2 新建simpleAjax.js文件

代码如下

复制代码

function startrequest(){//由simpleajax.html中的按钮点击调用这个函数
createXMLHttpRequest();//调用上面createXMLHttpRequest()函数
xmlhttp.onreadystatechange=handlestatechange;//调用下面handlestatechange()函数
xmlhttp.open("GET","simpleAjax.txt",true);
xmlhttp.send();
}

function handlestatechange(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("responseResult").innerHTML=xmlhttp.responseText;
}
}

名称解释：

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以文本方式，如果异步提交包含上传是传过不过去,需要使用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序列化表格内容为字符串的异步请求
function noTips(){
var formParam = $("#form1").serialize();//序列化表格内容为字符串
$.ajax({
type:'post',
url:'Notice_noTipsNotice',
data:formParam,
cache:false,
dataType:'json',
success:function(data){
}
});
}

//3.$.ajax拼接url的异步请求
var yz=$.ajax({
type:'post',
url:'validatePwd2_checkPwd2?password2='+password2,
data:{},
cache:false,
dataType:'json',
success:function(data){
if( data.msg =="false" ) //服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间
{
textPassword2.html("业务密码不正确！");
$("#validatePassword2").val("pwd2Error");
checkPassword2 = false;
return;
}
},
error:function(){}
});

//4.$.ajax拼接data的异步请求
$.ajax({
url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',
type:'post',
data:'merName='+values,
async : false, //默认为true 异步
error:function(){
alert('error');
},
success:function(data){
$("#"+divs).html(data);
}
});

一些简单的Ajax应用实例使用说明

相关文章

精彩推荐