ajax post提交数据_详解Ajax异步加载

前言：

作为资深球迷，提起Ajax，第一反应想到的是阿贾克斯，那个曾培养出伊布，范德法特，苏亚雷斯，亨特拉尔等一众球星的荷甲著名球队。

很显然，我们今天说的Ajax，跟足球没有任何关系，我们说的是这个Ajax：Asynchronous JavaScript And XML(异步JavaScript和XML)。

Ajax不是一门编程语言，指的是一种交互方式：客户端与服务器交换数据并更新在局部网页的技术，不需要重新加载整个页面。

Ajax的核心就是异步加载或者叫局部刷新。

什么是局部刷新？通过一个直观的例子来了解。

需求

1.点击提交按钮，向服务器发请求，等待响应。

2.同时在input框输入信息。

3.服务器返回"haha"字符串，将结果显示在页面。

传统方法会刷新整个页面：

点击提交按钮后，正在input框输入内容时，服务器响应返回。会以重新加载整个页面的形式展示结果，同步加载，所以input框内输入的内容全部清空。

Ajax局部刷新：

点击提交按钮后，在input框输入内容，服务器响应返回，只动态刷新要展示结果的部分网页，并不会影响到input框的输入，结果展示和输入是同时在进行的，互不干扰，异步加载。

传统web数据交互 VS Ajax数据交互

客户端请求方式不同：

传统：浏览器发送同步请求。

Ajax：异步引擎对象发送请求。

服务器响应方式不同：

传统：响应一个完整页面(JSP)。

Ajax：响应需要的数据。

客户端处理方式不同：

传统：需等待服务器响应完成并重新加载整个页面后，用户才能进行操作。

Ajax：动态更新页面中的局部内容，不影响用户在页面的其他操作。

Ajax原理

Ajax的工作原理相当于在客户端和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax技术的核心：XMLHttpRequest

常用方法：

1. open() 创建一个新的HTTP请求。

2. send() 将请求发送到服务器。

常用事件：

onreadystatechange：指定回调函数。

常用属性：

readyState：XMLHttpRequest的状态信息。

状态码表示的意义：

0：XMLHttpRequest对象未完成初始化。

1：XMLHttpRequest对象开始发送请求。

2：XMLHttpRequest对象的请求发送完成。

3：XMLHttpRequest对象对象开始读取响应。

4：XMLHttpRequest对象读取响应结束。

代码：

JSP：

ajax post提交数据_详解Ajax异步加载相关推荐

webpack 异步加载配置文件_详解webpack异步加载业务模块
虽然把我们用到的JS文件全部打包一个可以节省请求数,但如果打包后的JS文件过大,那么也容易出现白屏现象,许多操作失灵.而且一些区域是点到才出现,那么相关的JS其实可以剥离出这个大JS文件外.这就涉及到 ...
render注册一个链接组件_详解vue 动态加载并注册组件且通过 render动态创建该组件...
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
render vue 添加类_详解vue 动态加载并注册组件且通过 render动态创建该组件
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
android系统加载主题的流程,详解Android布局加载流程源码
一.首先看布局层次看这么几张图我们会发现DecorView里面包裹的内容可能会随着不同的情况而变化,但是在Decor之前的层次关系都是固定的.即Activity包裹PhoneWindow,Phon ...
ajax post提交数据_如何用前端知识获取数据，制作一个微信订餐后台案例？
在介绍案例之前,我们先来介绍以下在node中如何获取数据. get方式 1.把发送给服务器的数据追加在请求头的url后面 2.发送数据的大小有限制 3.get方式发送给服务器数据会有缓存. post方 ...
cesium 3dtiles 加载本地数据_深入echarts学习：加载跨域、异步、本地json数据的防坑录
1 说明: ===== 1.1 推荐指数:★★★★ 1.2 网上这方面说明,大多模棱两可,坑很多,讲透彻的不多,故本人做一个小结. 1.3 我曾介绍echarts的简单基本用法: <Echart ...
（原创）详解Glide图片加载库常用方法
Glide作为安卓开发常用的图片加载库,有许多实用而且强大的功能,那么,今天就来总结一番,这次把比较常见的都写出来,但并不是全部哦. 在介绍之前,先来说说什么是Glide吧: 在泰国举行的谷歌开发者论 ...
ajax post提交数据_第三十五天JavaScript中的ajax
AJAX 1.ajax的简介本小结参考:https://blog.csdn.net/caoxuecheng001/article/details/81290643 Ajax 即"Asy ...
ajax获取服务器端数据参数详解
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

ajax post提交数据_详解Ajax异步加载

ajax post提交数据_详解Ajax异步加载相关推荐

最新文章

热门文章