AJAX可以说是前端开发必须要会的技术。AJAX是异步的javascript and xml。是他们技术的合称。
1.原生写ajax。很多小伙伴在会了jQuery后,将原生都忘记了,所以原生我还是要在这里写一下。
<script>
function ajax(url,fnSucc)
{
// 第一步-创建ajax对象
if(window.XMLHttpRequest)
{
var oAjax = new XMLHttpRequest(); //标准浏览器
}
else
{
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
}
// 第二部-连接服务
oAjax.open("GET",url,true);//把要读取的参数的传过来。
// 第三部-发送请求
oAjax.send();
// 第四部-接收返回
oAjax.onreadystatechange=function()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
fnSucc(oAjax.responseText);//成功的时候调用这个方法
}
else
{
if(fnfiled)
{
fnField(oAjax.status);//失败
}
}
}
};
}
</script>
可以将它封装在一个js文件里,方便使用。使用方法如下:
<script src="ajax.js"></script>//引用封装的ajax文件 <script> window.onload=function() { var oBtn = document.getElementById("btn1"); oBtn.onclick = function() { ajax('a.txt',function(str){//读取a.txt文件里面的内容 alert(str);//将读取的内容输出 }) } }; </script>
2.jQuery写ajax。
- $.ajax({
- type : "POST", //提交方式
- url : "${pageContext.request.contextPath}/org/doDelete.action",//路径
- data : {
- "org.id" : "${org.id}"
- },//数据,这里使用的是Json格式进行传输
- success : function(result) {//返回数据根据结果进行相应的处理
- if ( result.success ) {
- $("#tipMsg").text("删除数据成功");
- tree.deleteItem("${org.id}", true);
- } else {
- $("#tipMsg").text("删除数据失败");
- }
- }
- });
这是在实际项目中的一段代码,type 是方式,默认是get;url是路径;data是你要发送的数据;success是成功回调;
注意:这里我还是要强调,跨域运用的不是AJAX技术,而是jsonp.为什么有那么多人弄混淆?就是因为jQuery团队将jsonp的使用封装在了ajax里,所以,很多人搞错了,人俩其实并不认识的。。。