Example of ajax asynchronous encapsulation function implemented in native javascript
The example in this article describes the asynchronous encapsulation function of ajax implemented by native javascript. Share it with everyone for your reference, the details are as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="Scripts/jquery.js"></script>
</head>
<style>
* { margin: 0px; padding: 0px; }
#box { float: left; width: 500px; }
#left { float: left; background: #090; width: 100px; height: 100px; }
#right { background: #C60; width: 100px; height: 100px; float: left; }
#box2 { width: 180px; height: 100px; }
html>body #box2 { width: auto; height: auto; min-width: 180px; min-height: 100px; }
</style>
<body>
<p id="box">
<p id="left">点击我 看效果！</p>
<p id="right">fffeeee</p>
</p>
<p style="width:100px; height:100px; background:#969; float:left;" id="dd">dddd</p>
<script>
// 异步请求封装 IE6即以上浏览器
// ajax(url,fnSucc,selectID,fnFaild)
//url 请求地址
//fnSucc 异步请求后的内容处理函数
//fnFaild 请求失败处理函数
function ajax(url,fnSucc,fnFaild)
{
//1.创建Ajax对象
//非IE6
var oAjax;
if(window.XMLHttpRequest)//不会报错，只会是undefined
{oAjax=new XMLHttpRequest();}
else
//iE6 IE5
{oAjax=new ActiveXObject("Microsoft.XMLHTTP");}
//alert(oAjax);
//2.连接服务器
//open(方法,文件名,异步传输)
oAjax.open("get",url,true);//制止缓存
//3.发送请求
oAjax.send();
//4.接收返回值 和服务器通讯的时候此事件发生
oAjax.onreadystatechange=function()
{
//oAjax.readyState //浏览器和服务器，进行到哪一步了 异步握手过程
if(oAjax.readyState==4)//读取完成（可能文件不存在）
{
if(oAjax.status==200 || oAjax.status==304)//请求成功 304即使浏览器缓存了也返回数据
{
fnSucc(oAjax.responseText);
//alert("成功"+oAjax.responseText);
}
else
{
if(fnFaild)//fnFaild传进来时
{
fnFaild(oAjax.status);
}
//alert("失败:"+oAjax.status);//status为404
}
}
}
}
window.onload=function(){
var oBtn=document.getElementById("left");
oBtn.onclick=function()
{
ajax("http://28967904.jsp.jspee.cn/ext/singlePage/list/json-1-1-20",function(str){
var da= JSON.parse(str); //JSON数据解析
alert(da.totalRow)
},function(erorr){
console.log('请求出错：'+erorr);
})
}
}
</script>
</body>
</html>
The above is the content of the ajax asynchronous encapsulation function example implemented by native javascript. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
WebStorm Mac version
Useful JavaScript development tools
SublimeText3 English version
Recommended: Win version, supports code prompts!
SublimeText3 Mac version
God-level code editing software (SublimeText3)
