AJAX请求的不同写法

最新推荐文章于 2022-05-06 18:27:06 发布

胡林ll

最新推荐文章于 2022-05-06 18:27:06 发布

阅读量361

点赞数

CC 4.0 BY-SA版权

分类专栏： AJAX 文章标签： jquery ajax

本文链接：https://blog.csdn.net/qq_40564078/article/details/104573903

AJAX 专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解了使用XMLHttpRequest对象和jQuery进行AJAX请求的方法，包括GET和POST请求的区别及实现方式，提供了详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.用XMLHttpRequest对象的ajax请求

post和get在向后台传值上有所不同

////////GET请求////////

$(function(){
  $("#btnGet").click(function(){
  var xhr;
  if(XMLHttpRequest){  //高版本IE 或者其他浏览器创建对象
       xhr=new XMLHttpRequest();
	} else{
	    xhr=new ActiveXobject("Microsoft.XMLHTTP");//低版本IE
	}
	xhr.open("get","GetDate.ashx?name=123",true);//第二个参数是要请求的处理程序
	xhr.send();//开始发送
	//回调函数：当服务器返回数据给浏览器后，自动调用该方法
	xhr.onreadystatechange=function(){
	  if(xhr.readyState==4){//服务端返回数据，数据完整
	    if(xhr,status==200){//判断响应状态码是否为200
		  *******
		}
	  }
	}
	
  });
});

//////POST请求///////
在传值上与get请求不同
$(function(){
  $("#btnPost").click(function(){
    var xhr;
	if(XMLHttpRequest){
	  xhr=new XMLHttpRequest();
	}else{
	  xhr=new ActiveXobject("Microsoft.XMLHTTP")
	}
	xhr.open("psot","GetDate.ashx",true);
	xhr.send("name=zhangsan&pwd=123");//向后台传的参数放在此处
	xhr.onreadystatechange=function(){
	  if(xhr.readyState==4){
	    if(xhr.status==200){
		  
		}
	  }
	}
  });
});

2.jquery下的ajax请求

（1）GET请求和Post请求分开写的写法

//GET请求
$(function(){
  $("#btnGet").click(function(){
    $.get("GetDate.ashx",{"name":"Lucy","pwd","123"}),function(data){
	  alert(data)
	});
  });
});



//POST请求
$(function(){
  $("#btnPost").click(function(){
    $.post("GetDate.ashx",{"name":"Lucy","pwd","123"},function(data){
	  alert(data)
	});
  });
});

（2）通用写法

type包含GET和POST，url是要请求的处理程序或者控制器，data是要向后台传递的参数

$(function(){
  $("#btnAja").click(function(){
    $.ajax({
	  type:"post",
	  url:"some.php",
	  data:"name=Lucy&pwd=123"
	  success:function(msg){
	    alert("Data Saved:"+msg);
	  }
	});
  });
});