JavaScript实例第二十天

最新推荐文章于 2024-11-02 12:42:04 发布

APinBom

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量493

点赞数

分类专栏：前端Javascript实例文章标签： javascript ajax 前端

本文链接：https://blog.csdn.net/qq_51649346/article/details/121350604

版权

前端Javascript实例专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文通过两个实例介绍了Ajax的基础应用。实例一展示了如何实现一个简单的Ajax框架，利用正则表达式判断请求文件类型并进行异步加载。实例二探讨了Ajax跨域异步交互的问题，通过XMLHttpRequest对象进行GET请求，并处理响应数据展示在页面上。同时，文章提到了由于浏览器策略导致的本地文件跨域问题。

摘要由CSDN通过智能技术生成

2021.11.16

实例一、实现一个Ajax框架

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实现一个Ajax框架</title>
</head>

<body>
</body>
	
	<script type="text/javascript">
		/*11~25行利用了正则表达式来获取异步加载文件的类型*/
	function myAjaxFramework(options){
		var resType;
		if(!options||options.url){
			return false;
		}
		if(/txt/.test(options.url)){
			resType="xml";
		}else if(/xml/.test(options.url)){
			resType="xml"
		}else if(/json/.test(options.url)){
			resType="json"
		}else{
			resType=""
		}
		
	/*初始化数据*/
		options.data=options.data||"";
		options.method=(options.method||"GET").toUpperCase();//get
		options.async=options.async||true;//异步还是同步，此处为异步
		options.responseType=options.responseType||reType;//设置返回值
		options.successCall=options.successCall||false;//成功回调
		options.failureCall=options.failureCall||false;//失败回调
		var xhr;
		if(window.XMLHttpRequest){
			xhr=new XMLHttpRequest();
		}else if(window.AcctiveXObject){
			xhr=new AcctiveXObject("Microsoft.XMLHTTP");
		}else{
			xhr=null;
		}
		if(xhr!=null){
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4){
					if(xhr.status==200){
						if(options.successCall){
							options.successCall(getResponseData(xhr,options.responseType));
						}
					}else{
						if(options.failureCall){
							options.failureCall(xhr,xhr.status)
						}
					}
				}
			};
			xhr.open(options.method,options.url+(options.method=="GET"?"?"+options.data:""),options.async);
			if(options.method!="GET" && options.data){
				xhr.send(options.data)
			}else{
				xhr.send();
			}
		}else{
			console.log("Your browser does not support")
		}
		return true;//myAjaxFramework调用成功
		}
		function getResponseData(xhr,resType){
			if(resType==="text"){
				return{resType:resType,resData:xhr.responseText}
			}else if(resType==="xml"){
				return{resType:resType,resData:xhr.responseXML}
			}else if(resType==="json"){
				return{resType:resType,resData:JSON.parse(xhr.responseText)}
			}else{
				return{}
			}
			
		}
		
	</script>
</html>

此框架主要功能是区分文件类型并实现异步加载功能

实例二、Ajax跨域异步交互

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax跨域异步交互</title>
</head>
	<div id="id-div-ajax" style="">
	<input type="button" onclick="ajax_load_php_request()" value="通过Ajax解析PHP">
		<div>解析文件:</div>
		<div id="id-div-ajax-php"></div>
	</div>

<body>
</body>
<script type="text/javascript">
	var xhr=null;
	function ajax_load_php_request(){
		if(window.XMLHttpRequest){
			xhr=new XMLHttpRequest();
		}else if(window.ActiveXObject){
			xhr=new ActiveXObject();
		}else{
			xhr=null;
		}
		if(xhr!=null){
			xhr.onreadystatechange=on_state_change;
			xhr.open("GET","ajax.php",true);
			xhr.send(null)
		}else{
			console.log("出错")
		}
		
	}
	function on_state_change(){
		var resText,iPos,vData,resHson,jsonObj,iLen;
		if(xhr.readyState==4){
			if(xhr.status==200){
				resText=xhr.responseText;
				iPos=resText.indexOf("!");
				vData=resText.substf(0,iPos+1);
				resJson=resText.substr(iPos+1);
				if(resJson.indexOf('{')>-1){
					jsonObj=JSON.parse(resJson);
					iLen=jsonObj.length;
					vData+="<table border='1'><tr><th>Title</th><th>Address</th><th>Info</th></tr>"
					for(let i=0;i<iLen;i++){
						vData+="<tr>";
						{
							try{
								vData+="<td>"+jsonObj[i].title+"</td>"
							}catch(err){
								vData+="<td><.td>"
							}
						}
						vData+="</td>"
					}
					vData+="</table>"
					document.getElementById("id-div-ajax-php").innerHTML=vData;
				}else{
					document.getElementById("id-div-ajax-php").innerText=resText;
				}
			}else{
				console.log("Problem")
			}
		}
	}
	</script>
</html>

php文件

<?php
echo "Hello,this is from server php file by ajax!";
$webArr=array{
array("title"=>"JavaScript","address"=>"http://www.jscode.com","info"=>"JavaScript Code Seqments"),array("title"=>"jQuery","address"=>"http://www.jqcode.com","info"=>"Ajax Code Seqments")
);
echo json_encode($webArr);
?>