全面认识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:罗坚元博客

原文链接:https://www.f2er.com/ajax/163390.html

猜你在找的Ajax相关文章