首先,在认识Ajax之前,我们来了解一下同步和异步
在Ajax没被发现之前:有一个很长很多信息要填的表单,有姓名,编号,工作内容,联系方式,地址,邮箱等等,当你填完后,点击提交,等待了好几分钟,它给你返回一个邮箱重复了,你把邮箱改好了之后,再提交,又等了好几分钟,它给你返回联系方式格式错误。—–这就是同步请求:每按一次提交,客户端就发送一次请求(内含你填的信息)给服务器,服务器就返回信息给客户端, 同样是上面的例子,当Ajax出现之后,你填写邮箱的时候,如果重复了,它会提示:邮箱重复,而不用刷新整个页面,这就是异步请求:我们需要改变某一块的内容而不影响其他内容,可以对网页局部的信息进行刷新。
接着,Ajax是什么?
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
我们怎样学习Ajax?
发送Ajax请求需要的技术不多:HTML+CSS把页面做好,利用JS就可以很好地学习Ajax。下面由我们来看看Ajax请求的步骤。
①建立一个Ajax对象
var xmlhttp=new XmlHttpRequest();
②发送请求
xmlhttp.open(method,url,async);其中method是请求方法,分为Get和Post两种。url是接收请求页面的地址,async:true表示异步,false表示同步,默认是true。
然后,GET方法:xmlhttp.send();
POST方法:
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);xmlhttp.send(param);其中param是要传递的参数。POST方法是要设置HTTP请求头的。
③接收响应
xmlhttp.responseText :返回的是String类型,而我们通常是利用JSON来接收的。
④我们怎样判断请求发送成功呢?
readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
通常我们是这样判断的:
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//code....
}
}
下面我们来看看一个简单的实例
index.html
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script> function load() { var xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET","test.txt",true); xmlhttp.send(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } } </script>
<title>Ajax例子</title>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 获取内容</h2></div>
<button type="button" onclick="load()">获取文档里的内容</button>
</body>
</html>
同目录下的test.txt文件
欢迎来到罗坚元的博客。
其实Ajax并没有那么难,上手也是很简单的,但是它还是有很多新鲜的信息需要我们去学习的。上面的只是JS原生的ajax请求代码,而在开发中我们经常利用JS框架来帮助我们更好的写Ajax请求,关于Jquery框架Ajax请求的文章请继续浏览我的博客。