AJAX

1.ajax的简介

本小结参考:https://blog.csdn.net/caoxuecheng001/article/details/81290643

​ Ajax 即“Asynchronous Javascript *And* X**ML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。

这并不是一种新的技术,而是好多旧的技术融合在了一起,而产生了一种新的思想。它包含的技术有:JavaScript、xml、HTML 、dom、XMLHttpRequest等。

在这种技术还没有出来之前,JavaScript一直不被人们所重视。人们普遍认为它只能去验证用户输入或者弹个框什么的。人们都认为这是一种低级的语言。直到ajax出现,做出来了令人惊艳的效果,简直到了不可思议的地步。举两个代表性的例子分别代表ajax两大特性:局部刷新和异步提交。

1、百度地图。我们都知道百度地图不是一下子就把所有的地图都加载进来,而是局部刷新。你拖到那个地方,网站就开始动态加载那个城市。这就用到了ajax局部刷新的功能,这个功能很是成功,让当时人们大吃一惊。因为没有ajax,你只要稍微动一下鼠标,网页立刻全部重新绘制,网页就会闪烁,你就得等待。那种情况用户体验是多么差啊。所以,没有ajax就没有地图软件的普及。

2、百度搜索。百度的搜索功能十分强大,令人称奇。你只要输入一个字或一个词,然后搜索框的下面就会有几个提示,关于这个字或词的比较热的搜索建议。你并没有点提交按钮,服务器就已经获取了文本框的内容。这就叫异步提交。当然了,它不能时时刻刻都在监控你的输入框,它会有个延迟,比如2s或3s后就给你服务器端的几个关于这个字的搜索建议。这个功能是没有ajax前,人们想都不敢想的功能。

2.Ajax最大的优点

​ 1). 能在不刷新整个页面的情况下维持与服务器通信

2). 使用异步的方式与服务器通信,不打断用户的操作

使用局部刷新技术会让页面现实的效率更高,同时又不破坏其他内容的显示,这就是Ajax的主要用处

3.先来介绍原生ajax操作模拟验证登录时,当输入的用户名已注册时,就会立刻提示该注册用户名已注册过。

<

这个是jsp页面中一个简单的输入框。用来模拟用户注册,当用户名已注册过时,旁边的span标签中会添加内容来提示用户。

整个ajax请求的代码如下,以get请求方式说明

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

后台使用servlet来模拟查询用户名

@WebServlet

通过一个李四来模拟数据库已存在,如果和李四同名则说明数据库中该用户已存在。

来说明一下get和post方法请求的不同:

post方法因为不能在url后面通过?把数据发送到后台,所有post请求必须在open方法后面设置请求头

xmlHttp

xmlHttp为XMLHttpRequest对象名,

在send()方法中通过key=value&key1=value2...的方式来向后台方式数据。

xmlHttp

ajax请求post方式代码如下:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

  1. ajax请求同步和异步的区别

同步:

当执行当前AJAX的时候会停止执行后面的JS代码,直到AJAX执行完毕后时,才能继续执行后面的JS代码。

当把async设为false时,这时ajax的请求时同步的,也就是说,这个时候ajax块发出请求后,他会等待,知道ajax请求执行完,再接着执行下main的js代码。

异步:

当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行回调函数(ajax相应的结果会返回到回到函数中来)

ajax post提交数据_第三十五天JavaScript中的ajax相关推荐

  1. ajax后台重定向会返回什么_第三十五天JavaScript中的ajax

    AJAX 1.ajax的简介 本小结参考:https://blog.csdn.net/caoxuecheng001/article/details/81290643 ​ Ajax 即"Asy ...

  2. ajax post提交数据_如何用前端知识获取数据,制作一个微信订餐后台案例?

    在介绍案例之前,我们先来介绍以下在node中如何获取数据. get方式 1.把发送给服务器的数据追加在请求头的url后面 2.发送数据的大小有限制 3.get方式发送给服务器数据会有缓存. post方 ...

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

    前言: 作为资深球迷,提起Ajax,第一反应想到的是阿贾克斯,那个曾培养出伊布,范德法特,苏亚雷斯,亨特拉尔等一众球星的荷甲著名球队. 很显然,我们今天说的Ajax,跟足球没有任何关系,我们说的是这个 ...

  4. 2021年大数据Spark(三十五):SparkStreaming数据抽象 DStream

    目录 SparkStreaming数据抽象-DStream DStream 是什么 DStream Operations Transformation Output函数 SparkStreaming数 ...

  5. java导入excel组件_三十五、Java中常见解析Excel引入的XXE组件复现与分析

    实验准备 1)在实验开始之前,我们已经在C盘根目录准备好了实验需要用到的POC验证excel文件,如下: 注:实验环境中没有安装Excel不能直接创建,方法供参考. 新建excel文件 test1.x ...

  6. 2021年大数据Flink(三十五):​​​​​​​Table与SQL ​​​​​​案例二

    目录 案例二 需求 代码实现-SQL 代码实现-Table 案例二 需求 使用SQL和Table两种方式对DataStream中的单词进行统计 代码实现-SQL package cn.it.sql;i ...

  7. 新版标准日本语初级_第三十五课

    语法   1. 小句1たら,小句2:~たら用于表示假定条件.其接续方式是把过去形式的た换成たら.不过,二类形和名词的过去否定形式~ではなかった后续たら时,要去掉其中的は变成~でなかったら. 明日雨が降 ...

  8. 【转】ABP源码分析三十五:ABP中动态WebAPI原理解析

    动态WebAPI应该算是ABP中最Magic的功能之一了吧.开发人员无须定义继承自ApiController的类,只须重用Application Service中的类就可以对外提供WebAPI的功能, ...

  9. 三十五、Scrapy 中的杂知识总结和代理池的编写

    @Author:Runsen 上次 用scrapy爬了腾讯招聘网站,有两个job.json 和detail.json,针对一个item,其实有更简单的处理方法. 今天讲讲scrapy 中的杂知识,做一 ...

最新文章

  1. 目标检测—YOLO不难学,你只是不会方法!
  2. MFC 加入背景图片并让控件背景透明
  3. TiDB 源码阅读系列文章(十九)tikv-client(下)
  4. moa 35 批量删除
  5. 几个关于tableView的问题解决方式整合
  6. [vue] 说说你使用vue过程中遇到的问题(坑)有哪些,你是怎么解决的?
  7. c语言define定义全局变量,webpack中使用DefinePlugin定义全局变量
  8. win 10 VMware与Hyper-v共存
  9. 安编译器错误_centos 安装pcre报c++编译器错误
  10. 小波变换和motion信号处理(一)
  11. jQuery对象与DOM对象之间的转换
  12. 用于无人驾驶技术的车道线_自动驾驶汽车可用于查找车道的4种技术
  13. 版本号命名规范及原则
  14. Crystal Reports - 根据模板导出PDF文件
  15. GooFlow入门使用
  16. 斐讯路由器k3c虚拟服务器,斐讯K3C路由器32.1.26.175如何打开telnet升级到官改固件教程...
  17. 设备发现[Airplay投屏应用]-mdns协议简介
  18. windown+cpu+Keras/Tensorflow+python+yolo3训练自己的数据集
  19. 从键盘输入10个整数,求其平均值
  20. Could not import the lzma module

热门文章

  1. HDU2083 简易版之最短距离【最值】
  2. POJ1555 ZOJ1720 UVA392 UVALive5309 Polynomial Showdown题解
  3. 前端开发 —— js 常用工具函数(utilities)
  4. The Python Challenge 题解
  5. 数组(有序数组)的公共部分
  6. 面向对象 —— 对类(class)的理解
  7. Linux 内核的壳 —— shell
  8. 吉联新软件工作好累_社交小白:“如何在社交软件和陌生人打招呼”
  9. 循迹小车程序编程_电子编程?其实很容易!
  10. python从入门到放弃-Python数据分析从入门到放弃(十五)爬虫(番外)基金选取实例...