ajax post提交数据_第三十五天JavaScript中的ajax

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相应的结果会返回到回到函数中来)