Ajax从入门到实践

最新推荐文章于 2024-11-07 01:22:08 发布

Fairy_Yss

最新推荐文章于 2024-11-07 01:22:08 发布

阅读量206

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/Fairy_Yss/article/details/100925601

版权

Ajax入门代码

//第一步：创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest ();//ie8以上创建方式

//第二步：准备发送(get方式请求：参数写在url地址里面，第三个参数为true,代表异步请求。post方式请求：参数写在xhr.send(参数)，url地址不带参，第三个参数同理)
xhr.open(“get”,“url地址（带参数）”，true);//url含参书写方式：“url地址?参数名1=”+参数1变量 +“&参数名2=”+参数二变量；

//若为post请求需要加上请求头，get请求则省略。
xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);

//第三步：执行发送(get方式参数为空，post方式填写相应参数即可。)
xhr.send(null);

//第四步：通过回调函数获取数据
xhr.onreadystatechang = function(){
if(xhr.readyState = =4){
if(xhr.status ==200){
//请求的数据格式为String类型或者json格式，获取方式
var result = xhr.responseText;
//json格式的数据获取后需要转化为js对象(方便操作数据)
result = JSON.parse(result)；
//XML格式的数据获取
var result = xhr.responseXML;
//根据后端返回的数据进行相应的操作（回调函数），此处省略
。。。。

}
}
}
注：readyState 值含义
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收接收到了响应头
3: 请求处理中正在下载响应体
4: 请求已完成，且响应已就绪
status值含义
404：没找到页面(not found)
403 ：禁止访问(forbidden)
500 ：内部服务器出错(internal service eervice error)
200 ：一切正常(ok)

JS封装Ajax

 function myAjax(obj){
	//defaults 默认请求 
	var defaults = { 
		type:"get",//请求方式 
		url:"#",//请求地址 
		data:{},//请求参数
		dataType:"text",//返回数据类型 
		sucsess:function(result){console.log(result)}//执行回调函数 }
		}
		for(var key in obj){ 
		defaults [key]=obj[key];//用户规定的请求赋值给默认请求
	   }
   
//遍历参数
	var param = "" ；
	for(var arrt in defaults .data){
 	param = param + arrt + "="+defaults .data[arrt]+"&";
   } 
   
 //去掉最后一个&
 	if(param ){ 
 	param = param .substring(0,param.length -1);//我咋感觉是param -2
  	} 
  	
  	var xhr = new XMLHttpRequest ()；
   	if(defaults.type == "get"){ 
   		defaults.url = default.url +"?"+param; 
   } 
   
   //准备发送
   xhr.open(defaults.type,defaults.url,true); 

  //执行发送
  if(defaults.type == "get"){
  	xhr.send(null);
    }else if(defaults.type == "post"){
         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
         xhr.send(param); 
     } 
     
  //获取数据
  xhr.onreadystatechang = function(){  
   if(xhr.readyState = =4){   
   if(xhr.status ==200){   
   	var result = null;
   	if(defaults.dataType =="json"){
   	result  = xhr.responseText;
	result = JSON.parse(result)；
	}else if(defaults.dataType =="xml"){
	 	result  = xhr.responseXML;
	 	//通过标签名方式获取xml值（document.getElementByTagName("Student")[0].textContent）
	}else{
		result  = xhr.responseText;
	}
	defaults.success(result);
}
}
}

jQuery获取ajax数据

1、ajax方法
$.ajax({
url:url变量,
type:type变量,
data:{参数名1：参数1变量，参数2：参数2变量},
success:function(result){
根据响应结果result执行相应操作
。。。
}
})
2、get方法
var param = “name=”+name+“&age=”+age;
$.get(url+"?"+param,function(result){
根据响应结果result执行相应操作
。。。
})
3、post方法
var name = “mia”,age = 12;
$.post(url,{name:name,age:age},function(result){
根据响应结果result执行相应操作
。。。
})

跨域(只能获取get方式请求的数据)

跨域的本质：先定义一个方法，服务器执行方法调用，方法中的参数就是我们想要的数据。
浏览器的script、img、iframe标签是不受同源策略限制的，所以通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的callback函数，并把我们需要的json数据作为参数传入
1、在需要跨域请求的地方动态创建script标签，并指定相应跨域地址和参数。用appendChild()放在head标签里面
2、定义一个方法（服务器执行）
var script = document.creatElement(“script”);
script.src(url地址可带参)；
var head = document.getElementByTagName(“head”)[0];
head.appendChild(script);
window[“foo”] = function(data){
根据data数据执行相应操作
。。。
eg：
if（data==“ok”）{//data是根据传过去的参数来决定值的
…
}else{…}
}

eg：获取百度联想词

var keyValue = "哪吒"；
	var script = document.creatElement("script");
	//wd:关键字  cd:回调函数。（接口文档会说明） 
	script.src("http://suggestion.baidu.com/su?wd="+keyValue+"&cd=qqq")；
	var head = document.getElementByTagName("head")[0];
	head.appendChild(script);
	//定义回调函数（全局）
    window["qqq"] = function(data){
    	var html ="";
    	for(var i =0;i<data.s.length;i++){
    	var temp = data.s[i];
    	 html +="<li>"+temp+"</li>"
    	}
    	document.getElementById("ul").innerText=html;
}

跨域封装

function myAjax(obj){
    	//defaults 默认请求 
    	var defaults = { 
    		type:"get",//请求方式 
    		url:"#",//请求地址 
    		data:{},//请求参数
    		jsonp:"cb",//指定回调方法名称（在调用封装函数的时候记得传入这个参数--根据接口文档规定		//的回调函数名称）
    		dataType:"text",//返回数据类型 
    		sucsess=function(result){console.log(result)}//执行回调函数 }‘
    	}	
    	
   		for(var key in obj){ 
   		defaults [key]=obj[key];//用户规定的请求赋值给默认请求
   	    }
	    //遍历参数
    	var param = "" ；
    	for(var arrt in defaults .data){
     	param = param + arrt + "="+defaults .data[arrt]+"&";
       } 
   		 //去掉最后一个&
     	if(param ){ 
     	param = param .substring(0,param.length -1);//我咋感觉是param -2
      	} 
     
		var url = defaults.url+"?"+param+"&"+defaults.jsonp+"=qqq";
		var script = document.createElement("script");
   	    script.src=url;
   	    var head = document.getElementByTagName("head")[0];
   	    head.appendChild(script);
		window["qqq"]=function(data){
			defaults.success(data);
		}
}

jQuery跨域技术

var keyValue = document.getElementById(“key”).value;
$.ajax({
url:跨域地址,
data:{wd:keyValue},
dataType:“jsonp”,//说明返回数据为跨域数据（非跨域是xml、json、string数据）
jsonp:“cb”,//指定回调函数名称（根据接口文档）
success:function(data){
//根据服务器返回的data执行相应操作
。。。
}
})