Ajax是什么

Ajax是什么玩意儿

大白话

不刷新页面就可以帮助我们从服务器读取到数据的一个东西。

官话

Ajax全称Asynchronous JavaScript and XML,意思就是JavaScript执行异步网络请求。在使用Ajax之前,我们每次发送一个HTTP请求,就会刷新一次页面,即使页面其他位置数据不变,只是在表中增加一行数据,也必须刷新页面才能看到新加入的这条记录。即,一次HTTP请求对应一个页面。有了Ajax,我们用JavaScript发出HTTP请求,再由JavaScript接收数据,不用刷新页面就可以看到我们的记录添加成功了。

手写一个Ajax

设计思路

首先我们需要创建一个Ajax对象

我们需要向服务器发出请求,那么就需要创造一个可以和服务器交流的东西,就是Ajax对象。
var oAjax = new XMLHttpRequest();

连接到服务器

创建完了对象,我们需要与服务器建立连接,才能进行交流。open方法有三个参数,第一个是我们采用的请求方法,一个是get,一个是post,第二个参数是我们需要读取的文件名。第三个参数是我们是否采用异步传输。我学了半年多编程,感觉同步和异步这个概念在计算机里有点反人类,和我通俗的理解恰好相反。同步反而是这个做完才能做下一步,异步反而是可以同时做不同的事情。
oAjax.open(‘get’,‘a.txt’,true);

发送请求

我们需要给服务器指明我们需要的数据
oAjax.send();

接收返回值

接收从服务器传来的数据
oAjax.onreadystatechange=function()
{
if(oAjax.readyState4)//读取完成
{
if(oAjax.status
200)//成功
{
alert(‘successful’+oAjax.responseText);
}
else
{
alert(‘failed’);//404或其他异常码
}
}
}

代码

<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function()
		{
			var oBtn=document.getElementById('btn1');
			oBtn.onclick=function()
			{
				//创建Ajax对象
				var oAjax = new XMLHttpRequest();
				//连接服务器
				oAjax.open('GET','a.txt',true);
				//发送请求
				oAjax.send();
				//接收返回信息,这个事件类似于window onload,当数据返回来的时候,这个事件会被调用。
				oAjax.onreadystatechange=function()
				{
					if(oAjax.readyState==4)//读取完成
					{
						if(oAjax.status==200)//成功
						{
							alert('successful'+oAjax.responseText);
						}
						else
						{
							alert('failed');//404或其他异常码
						}
					}
				}
			}
		}
	</script>
</head>
<body>
	<input type="button" name="" id="btn1" value="读取" />
</body>
</html>

封装Ajax

最后创建了个ajax.js文件将上述Ajax代码封装起来。我们把Ajax封装起来,以后就可以直接去用了。参数中添加了两个函数,成功后应该怎么处理数据,失败后应该如何处理。还有url指明要获取的文件

function ajax(url,fnSucc,fnFaild,)
{
	//创建Ajax对象
	var oAjax = new XMLHttpRequest();
	//连接服务器
	oAjax.open('GET',url,true);
	//发送请求
	oAjax.send();
	//接收返回信息,这个事件类似于window onload,当数据返回来的时候,这个事件会被调用。
	oAjax.onreadystatechange=function()
	{
		if(oAjax.readyState==4)//读取完成
		{
			if(oAjax.status==200)//成功
			{
				fnSucc(oAjax.responseText);
			}
			else
			{
				if(fnFaild)
				{
					fnFaild(oAjax.status);
				}
			}
		}
	}
}

最后代码

<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript">
		window.onload=function()
		{
			var oBtn=document.getElementById('btn1');
			oBtn.onclick=function()
			{
				ajax('a.txt',function(str){
					alert(str);
				});
			}
		}
	</script>
</head>
<body>
	<input type="button" name="" id="btn1" value="读取" />
</body>
</html>

效果如下

我先把网页移动到tomcat服务器的根目录下,

在这里插入图片描述
再把需要读取的文件也移动到同级目录下。
在这里插入图片描述
然后启动tomcat服务器,让我们可以从浏览器可以访问到它。
在这里插入图片描述
然后输入网址,发起HTTP请求。
在这里插入图片描述
然后点击按钮读取,发起Ajax请求,然后就真的读取到了数据了。当然路径一定要搞对,不然就不是Ajax的错了。
在这里插入图片描述

发布了20 篇原创文章 · 获赞 1 · 访问量 328
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览