搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发

前端|AJAX入门

算法与编程之美 2020-06-27



AJAX是什么

AJAX 全称为 Asynchronous JavaScript And XML,是一种从网页访问 Web 服务器的技术AJAX 的作用有从 web 服务器请求数据以及显示或使用数据。

AJAX实例

可以用一个本地文件来演示一下,我们将自己写的一个txt文件的路径作为url的值,如下。

<!DOCTYPE  html>

<html>

<body>

 

<div  id="demo">

<h1>XMLHttpRequest  对象</h1>

<button  type="button" onclick="loadDoc()">点击此处打开文件</button>

</div>

 

<script>

function  loadDoc() {

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 &&  this.status == 200) {

      document.getElementById("demo").innerHTML  =

      this.responseText;

    }

  };

  xhttp.open("GET",  "1.txt", true);

  xhttp.send();

}

</script>

 

</body>

</html>

这张 HTML 页面包含一个 <div> 和一个 <button>
<div> 用于显示来自服务器的信息。
<button> 被点击时就会调用函数。
下图1为结果,图2为点击按钮后的结果。

图1

图2

AJAX请求

XMLHttpRequest 对象用于同服务器交换数据,也就是向服务器发送请求,也就是上面实例化中的xhttp.open()。括号中的主要参数如下‘

method 请求的类型:
GET 还是 POST

url,      服务器(文件)位置

async    true(异步)或 false(同步),不填默认为异步


AJAX响应

发服务器发送请求成功过后,服务器会有相应的响应,要从下面一些相应的属性来理解。

Onreadystatechange定义了当 readyState 属性发生改变时所调用的函数。

readyState保存了 XMLHttpRequest 的状态,不同的状态由数字表示

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 正在处理请求

4: 请求已完成且响应已就绪


Status存有 XMLHttpRequest 对象的状态。比如404就是页面丢失(Page not found),200就是完成(Ok)。

当 readyState 为 4,status 为 200 时,响应就绪。





END


主  编   |   张祯悦

责  编   |   刘仕豪


 where2go 团队


   

温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《前端|AJAX入门》的版权归原作者「算法与编程之美」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注算法与编程之美微信公众号

算法与编程之美微信公众号:algo_coding

算法与编程之美

手机扫描上方二维码即可关注算法与编程之美微信公众号

算法与编程之美最新文章

精品公众号随机推荐