首页 > 代码库 > web项目ajax技术一些总结
web项目ajax技术一些总结
WEB项目中,最主要的就是前后端间的联络。有时需要不进行页面跳转的前提下请求后端方法(action),就需要用到ajax。
在这个博客中,我用到的都是原生的js的ajax,不是很喜欢用jquery的ajax,如果以后用到了,再补充。首先,案例就是本博客的博文删除功能。在个人空间,点击文章题目旁边的删除按钮,就会自动进行ajax请求,后端方法。
<button type="button" id=${article.id} onclick="button_Click_1(this)">删除</button>
js代码:
var oAjax = null; // 页面加载同时,即创建ajax对象 if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest(); } else { oAjax = new ActiveXObject(‘Microsoft.XMLHTTP‘); } // 点击删除按钮对应的javascript方法,该方法里进行ajax请求 function button_Click_1(btn) { var delete_id = btn.id; url = "<%=basePath %>article/delete.form?id=" + delete_id; oAjax.open(‘POST‘, url, true); oAjax.send(); oAjax.onreadystatechange = function() { if(oAjax.readyState == 4) { if(oAjax.status == 200) { alert("delete successfully."); location.reload(); } else { alert("delete failed"); } } }; }
值得注意一点是,删除文章id的传递。首先将article.id赋给button的id,之后js代码中var delete_id = btn.id一句即可获得要删除文章的id。这个id作为参数拼接进url,ajax请求发送即可。
上面的例子其实是很简单的,ajax方面比较麻烦,但却非常实用的方面,其实是参数和返回值。如果要传输的是一个对象,该怎么做?很多时候,我们都已json的数据格式,进行传输。所以,有时我我们需要进行string和json之间的类型转换。
JSON.parse(str)(用于从字符串中,解析json对象)和JSON.stringify(object)(用于从一个对象解析出字符串)。
传递参数一种就是,拼接url,另一种就是组合成json格式做参数,然后发送。
思路 可参考下面代码:
function Person(name, age) {
this.name = name;
this.age = age;
}
....
var person = new Person("Alice", 12);
var pars = "person=" + person.toJSONString();
var url = "/...../......";
var mailAjax = new Ajax.Request(
url, {
method: ‘get‘,
parameters: pars,
onComplete: jsonResponse
});
返回值的获取,代码可参考:
//结合上述删除博文的例子
.......
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var text = XMLHttpReq.responseText;
console.log(text);
}
}
至于后端对json的操作,那就是JSONObject类了。
web项目ajax技术一些总结