Web基础：Ajax入门

最新推荐文章于 2024-07-18 16:36:56 发布

xxyneymar

最新推荐文章于 2024-07-18 16:36:56 发布

阅读量419

点赞数

分类专栏： javaWeb 文章标签： ajax 前端

本文链接：https://blog.csdn.net/xxyneymar/article/details/120852615

版权

1.全局刷新和局部刷新

全局刷新：整个浏览器被新的数据覆盖，在网络中传输大量的数据，浏览器需要加载，渲染页面。

局部刷新：在浏览器的内部，发起请求，获取数据，改变页面中的部分内容，其余的页面无需加载和渲染。

Ajax就是用来做局部刷新的。局部刷新使用的核心对象是异步对象XMLHttpRequest。这个异步对象是存在于浏览器内存中的，使用JavaScript语法创建和使用XMLHttpRequest对象。

2.Ajax简介

Ajax：Asynchronous JavaScript and XML

Asynchronous：异步的

JavaScript：javascript脚本，在浏览器中执行

xml：是一种数据格式

Ajax是一种做局部刷新的方法，不是一种新语言。Ajax包含的技术主要有javascript、dom、css、xml等等。核心是javascript和xml。

javascript：负责创建异步对象，发送请求，更新页面的dom对象。ajax请求需要服务器端的

数据，要和服务端交互。

xml：网络中的传输的数据格式。(目前使用json来替代了xml)

3.Ajax异步的实现步骤

3.1 异步对象的重要属性

①onreadystatechange属性：一个js函数名或直接定义函数，每当readyState属性改变时，就会调用该函数。

②readyState属性：存有XMLHttpRequest的状态，从0到4发生变化。

0：请求未初始化，创建异步请求对象。var xmlHttp = new XMLHttpRequest();

1：初始化异步请求对象。xmlHttp.open(请求方式,请求地址,true)

2：异步对象发送请求。xmlHttp.send()

3：异步对象接收从服务端返回的数据，XMLHttpRequest内部处理。注意3是异步对象内部使

用，表示获取了原始的数据。

4：异步请求对象已经将数据解析完毕，此时才可以读取数据。在状态4时更新当前页面。

③status属性：

200："OK"

404：未找到页面

④responseText/responseXML属性：获取服务器端返回的数据。

responseText：获得字符串形式的响应数据

responseXML：获得XML形式的响应数据

3.2 实现步骤

①创建异步对象XMLHttpRequest：

var xmlHttp = new XMLHttpRequest();

②给异步对象绑定onreadystatechange事件。当异步对象发起请求，获取了数据就会触发这个事件，这个事件需要指定一个函数，在函数中处理状态的变化。

xmlHttp.onreadystatechange = function(){

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

处理请求的状态变化

}

③初始异步请求对象。异步的方法open()。

xmlHttp.open(请求方式get|post,"服务器端的访问地址",同步|异步请求[默认是true表示异步]);

如：xmlHttp.open("get","loginServlet?name=zs&pws=123",true);

④使用异步对象发送请求。

xmlHttp.send();

⑤接收服务器响应的数据。使用异步对象的responseText或responseXML属性。

3.3 异步请求流程图

可以有多个异步对象。

4.使用Ajax的例子

1.简单例子：根据用户输入，计算bmi，然后通过局部刷新出现检测结果。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>局部刷新--ajax</title>
      <script type="text/javascript">
          //使用内存中的异步对象࿰

最低0.47元/天解锁文章

xxyneymar

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Web基础：Ajax入门

1.全局刷新和局部刷新全局刷新：整个浏览器被新的数据覆盖，在网络中传输大量的数据，浏览器需要加载，渲染页面。局部刷新：在浏览器的内部，发起请求，获取数据，改变页面中的部分内容，其余的页面无需加载和渲染。 Ajax就是用来做局部刷新的。局部刷新使用的核心对象是异步对象XMLHttpRequest。这个异步对象是存在于浏览器内存中的，使用JavaScript语法创建和使用XMLHttpRequest对象。2.Ajax简介 Ajax：Asynchronous JavaScr...
复制链接

扫一扫

专栏目录