Ajax基础学习

àì夳堔傛蜴生んèń 2022-09-11 03:28 17阅读 0赞

## 1.ajax前端技术 ##

前端技术：在浏览器中执行的程序都是前端，HTML，css，js等  
 后端技术

（1）全局刷新：使用form，href等发起的请求是全局刷新  
用户发起请求，视图改变了，使用新的数据添加到页面  
缺点：  
1.传递数据量比较大，占用网络的带宽  
2.浏览器需要重新渲染整个页面  
3.用户的体验感不好

（2）局部刷新：在当前页面中，发起请求，获取数据，更新当前页面的dom对象，对视图部分刷新  
（异步对象，在浏览器内存中的JavaScript对象，各大浏览器都能支持异步对象  
异步对象 XMLHttpRequest  
）  
特点：  
1.数量比较小，在网络中传输速度快  
2.更新页面内容，是部分更新页面，浏览器不用全部渲染视图  
3.在一个页面中，可以做多个局部刷新  
4.从服务器获取数据，拿到更新视图

## 2.异步请求对象 ##

在局部刷新中，使用异步请求对象，在浏览器内部发起请求，

## 3.异步对象XMLHttpRequest接收 ##

js中的一种对象，使用js语法创建和使用这个对象

var xhr = new XMLHttpRequest();

之后就可以使用xhr对象的属性或者函数，进行异步对象的操作。

使用异步对象实现局部刷新，异步对象主要是负责发起请求，传递请求的参数并从服务器端接收数据。(网络操作)。

局部刷新需要的技术

1）JavaScript：创建XMLHttpRequest对象，调用它的属性或者方法

2）dom：处理dom，更新select的数据

3）css：处理视图，更新，美化

4）servlet：服务器端技术

5）数据的格式：json。之前是xml

把上面这些技术的综合使用叫做ajax，

## 4.Ajax ##

AJAX = Asynchronous Javascript And XML（异步JavaScript和XML），是一种无需重新加载整个页面的情况下，能够更新部分页面的新方法

AJAX不是一种新的语言，是多种技术的综合使用，包含了dom,javascript,jsp,jdbc等

我们使用ajax实现局部刷新

Ajax的核心是JavaScript和xml(json):使用JavaScript操作异步对象XMLHttpRequest和服务器交换使用的json格式。

## 5.异步对象XMLHttpRequest的属性和方法 ##

1.创建异步对象，使用js语法

var xhr = new XMLHttpRequest();

2.XMLHttpRequest方法

open(请求方式，服务器端的访问地址，异步还是同步,true代表异步)

xhr.open("get","login",true)

send():使用异步对象发送请求

3.XMLHttpRequest属性

readyState属性：请求的状态

0：表示创建异步对象时，new XMLHttpRequest();

1：表示初始异步对象的请求参数，执行open方法

2：表示使用send()方法发送请求。

3：表示使用异步对象从服务器端接收了数据

4：异步对象接收了数据，并在异步对象内部处理完成后

status属性：网络的状态，和Http的状态码对应

200：表示请求成功

404：表示服务器端资源未找到

500：服务器内部代码有错误

responseText属性：表示服务器端返回的数据

例如：

var data = xhr.responseText;

## 6.异步对象XMLHttpRequest使用步骤 ##

1）使用js创建异步对象

var xhr = new XMLHttpRequest();

2）给异步对象绑定事件，事件名称onereadystatechange

例如button增加单击事件 onclick

xhr绑定事件

xhr.onreadystatechange = function{ 
    //当事件发生时执行的代码
    }

在绑定事件中做什么，根据readyState值做请求

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && status ===200){
    //从服务器端已经获取数据，更新当前的dom对象，完成请求的处理
    var data = xhr.responseText;
    //更新dom对象
    documen.getElementByTd("#mydiv").innerHTML = data;
    }
    }

3)初始请求的参数，执行open函数

xhr.open("get","loginSerlet",true)

4）发送请求，执行send()

xhr.send()

**使用ajax关注的是：**

**使用异步对象XMLHttpRequest发起请求，接收数据，更新dom对象，**

**ajax操作中，处理的是数据，从服务器端接收数据，没有视图**

ctrl+shift+delete清空浏览器缓存

## 7.同步与异步 ##

看open(请求方式，访问url，boolean是不是异步的)

true：异步请求（相当于可以同时进行多个请求处理，不需要考虑当前的请求是否被响应）

false：同步请求（相当于一次只执行一次请求处理）

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关【Ajax】Ajax学习笔记(基础用法)

【Ajax】Ajax学习笔记 1、全局刷新与局部刷新全局刷新：整个浏览器覆盖。在网络中传输大量的数据。浏览器需要加载，渲染页面。 ![在这里插入

- 日理万妓/ 2023年10月08日 15:17/ 0 赞/ 38 阅读

相关 AJAX基础

简介： AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX不是一种新的编程语言，而是

骑猪看日落/ 2023年02月17日 14:25/ 0 赞/ 31 阅读

相关 ajax基础

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

浅浅的花香味﹌/ 2022年10月01日 05:53/ 0 赞/ 29 阅读

相关 Ajax基础学习

1.ajax前端技术前端技术：在浏览器中执行的程序都是前端，HTML，css，js等后端技术（1）全局刷新：使用form，href等发起的请求是全局刷

àì夳堔傛蜴生んèń/ 2022年09月11日 03:28/ 0 赞/ 18 阅读

相关 Ajax学习笔记——Ajax基础总结

1. AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务

Dear 丶/ 2022年09月05日 04:04/ 0 赞/ 256 阅读

相关 AJAX异步请求基础学习

AJAX 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步：客户端和服务器端

桃扇骨/ 2022年08月28日 12:55/ 0 赞/ 196 阅读

相关 Ajax基础

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服

冷不防/ 2022年08月23日 04:49/ 0 赞/ 33 阅读

相关 Ajax基础

（一） [https://blog.csdn.net/qq\_14947845/article/details/54670214][https_blog.csdn.net_qq

迷南。/ 2022年05月19日 12:53/ 0 赞/ 220 阅读

相关 AJAX 基础

AJAX 基础 AJAX 指异步 JavaScript 及 XML （Asynchronous JavaScript And XML ）。 AJAX 是一种在 2005

╰半夏微凉°/ 2022年05月11日 04:26/ 0 赞/ 291 阅读

相关 Ajax基础

1：ajax基础 2：ajax运行原理及实现(都是在为浏览器做事) 3：ajax异步编程 ajax基础传统网站中存在问题：网速慢的时候，加载页面非常慢

雨点打透心脏的1/2处/ 2021年08月13日 18:09/ 0 赞/ 492 阅读