前端|AJAX入门

简介: 前端|AJAX入门

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 时,响应就绪。


目录
相关文章
|
23天前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
2月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
60 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
3月前
|
Web App开发 缓存 前端开发
前端性能优化:从入门到精通
【2月更文挑战第3天】
51 1
|
3月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
22 0
|
4月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
58 1
|
16天前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
31 0
|
16天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
21 1
|
16天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
22 1
|
20天前
|
JavaScript 前端开发 API
游戏开发入门:Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端(Flask或Django)和Vue.js前端开发游戏变得流行,能提高开发效率和可维护性。本文指导如何构建这样的项目,包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件,强调前后端协作和API接口的重要性。这种架构促进团队合作,提升代码质量和游戏体验。
|
3月前
|
前端开发 JavaScript API
前端秘法番外篇----学完Web API,前端才能算真正的入门
前端秘法番外篇----学完Web API,前端才能算真正的入门