全面认识Ajax

发布时间：2020-12-16 02:00:18 所属栏目：百科来源：网络整理

导读：首先，在认识Ajax之前，我们来了解一下同步和异步在Ajax没被发现之前：有一个很长很多信息要填的表单，有姓名，编号，工作内容，联系方式，地址，邮箱等等，当你填完后，点击提交，等待了好几分钟，它给你返回一个邮箱重复了，你把邮箱改好了之后，再提交，

首先，在认识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请求的文章请继续浏览我的博客。

更多精彩内容等待你的浏览—By：罗坚元博客

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!