原生ajax与jquery-ajax

一、原生ajax

get方式:

//1. 创建xhr对象
var xhr ; 
if(window.XMLHttpRequest){
	xhr = new XMLHttpRequest(); 
}else{
	xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
}
//2.发送请求,并传递参数
xhr.open("GET", "/ajax_day2/test?name"=+zhangsan);
xhr.send();
//3.处理响应
xhr.onreadystatechange = function(){ 
  if(xhr.readyState==4 && xhr.status==200){
     console.log(xhr.responseText);//resonseText获得字符串形式的响应数据(获得字符串)
   //TODO填写js/jquery代码
 	}
}

案例:
原生ajax与jquery-ajax_第1张图片

post方法:

//1. 创建xhr对象
var xhr ; 
if(window.XMLHttpRequest){
	xhr = new XMLHttpRequest(); 
}else{
	xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
}
//2.发送请求,并传递参数
xhr.open("POST", "url");
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");//用来模拟form进行传递数据编码 
xhr.send("参数");//请求体的传参(没有长度限制) xhr.send("name=zhansan&age=12")
//3.处理响应
xhr.onreadystatechange = function(){ 
  if(xhr.readyState==4 && xhr.status==200){
     console.log(xhr.responseText);//resonseText获得字符串形式的响应数据(获得字符串)
   //TODO填写js/jquery代码
 	}
}

二、query-Ajax——get/post方法

1.jQuery提供了一个全局函数
  $.ajax({
    type:"POST|GET",
    url:"",
    data:"name=张三|{key:value}",
    dataType:"JSON",
    success:function(result){
       console.log(result);
    }
  })
2.发送GET方式的异步请求 
    $.get(url,data,function(result){},"JSON");

3.发送POST方式的异步请求
    $.post(url,data,function(result){},"JSON");

你可能感兴趣的:(axios/ajax)