第十五章 AJAX请求

第十五章AJAX请求

  • 1.什么是AJAX请求
  • 2.原生JavaScript的AJAX的请求示例
  • 3.AJAX请求的特点说明
  • 4.jQuery的AJAX方法
  • 5.jQuery的get和post方法
  • 6.jQuery的getJSON方法
  • 7.jQuery的serialize方法

1.什么是AJAX请求

在这里插入图片描述

2.原生JavaScript的AJAX的请求示例

用下面的页面来展示AJAX请求
第十五章 AJAX请求_第1张图片
其中就绑定了一个单机事件
第十五章 AJAX请求_第2张图片
下面就是这个页面
第十五章 AJAX请求_第3张图片

下面我们先写一个BaseServlet
第十五章 AJAX请求_第4张图片
第十五章 AJAX请求_第5张图片
下面再写一个类来继承BaseServlet类
第十五章 AJAX请求_第6张图片

进行配置
第十五章 AJAX请求_第7张图片
第十五章 AJAX请求_第8张图片

下面三步之后,就可以将请求发送给服务器了
第十五章 AJAX请求_第9张图片
第十五章 AJAX请求_第10张图片
第十五章 AJAX请求_第11张图片
如果下面我要访问这个person对象,由于客户端和服务器不在同一台电脑上,我们将person的地址返回给客户端是没有用的,客户端需要的是里面的数据
第十五章 AJAX请求_第12张图片
我们要将其转化成person格式的字符串,再将其返回给客户端
第十五章 AJAX请求_第13张图片

那么客户端如何接收请求呢
第十五章 AJAX请求_第14张图片
第十五章 AJAX请求_第15张图片
第十五章 AJAX请求_第16张图片

下面用alert我们看响应的信息
第十五章 AJAX请求_第17张图片
第十五章 AJAX请求_第18张图片

实际开发的时候,我们会将信息显示在页面上
第十五章 AJAX请求_第19张图片
第十五章 AJAX请求_第20张图片
第十五章 AJAX请求_第21张图片
第十五章 AJAX请求_第22张图片
第十五章 AJAX请求_第23张图片
在这里插入图片描述

3.AJAX请求的特点说明

第十五章 AJAX请求_第24张图片
第十五章 AJAX请求_第25张图片
第十五章 AJAX请求_第26张图片
当我发起请求后,真个页面除了div有变化,其他地方都没有变化(地址栏也没有变化)
第十五章 AJAX请求_第27张图片
下面我们看看以前的请求
第十五章 AJAX请求_第28张图片
第十五章 AJAX请求_第29张图片
我点击这个请求的时候,地址栏就发生了变化,原来的内容就都没有了
第十五章 AJAX请求_第30张图片
上面是AJAX的特点局部更新
下面我们看看AJAX另一个特点,异步请求
我们将true改为false,false表示同步
第十五章 AJAX请求_第31张图片
第十五章 AJAX请求_第32张图片

这里我们让其休眠3s
第十五章 AJAX请求_第33张图片
这里就是同步,浏览器先收到服务器的返回的数据,才去执行执行这个最后一行代码
第十五章 AJAX请求_第34张图片
第十五章 AJAX请求_第35张图片
下面是异步
我们将false改为true
改为true之后,他就不会等服务器返回数据之后,才去执行最后一行代码
而是在它休眠的时候,先去执行最后一行代码
第十五章 AJAX请求_第36张图片
他不会像同步那样等待
第十五章 AJAX请求_第37张图片
第十五章 AJAX请求_第38张图片

下面我们演示一下异步有什么用处
我们先将其改成同步
第十五章 AJAX请求_第39张图片

然后下面加几个按钮
第十五章 AJAX请求_第40张图片

我在点完第一个按钮后,其他的就点不动了
第十五章 AJAX请求_第41张图片

下面看看异步
第十五章 AJAX请求_第42张图片
异步就不会卡死
第十五章 AJAX请求_第43张图片
第十五章 AJAX请求_第44张图片

4.jQuery的AJAX方法

第十五章 AJAX请求_第45张图片
第十五章 AJAX请求_第46张图片
下面是服务器的代码
第十五章 AJAX请求_第47张图片
第十五章 AJAX请求_第48张图片
第十五章 AJAX请求_第49张图片
在这里插入图片描述

这个数据要更新到页码上面才行
第十五章 AJAX请求_第50张图片
第十五章 AJAX请求_第51张图片
第十五章 AJAX请求_第52张图片
我们上面的dataType为text需要我们转换为json对象
而datatype为json的时候,不需要转换
第十五章 AJAX请求_第53张图片
第十五章 AJAX请求_第54张图片
第十五章 AJAX请求_第55张图片
其中的data属性也可以换种写法
第十五章 AJAX请求_第56张图片
结果一模一样
第十五章 AJAX请求_第57张图片

5.jQuery的get和post方法

第十五章 AJAX请求_第58张图片
get和post请求的方法是完全一模一样的
第十五章 AJAX请求_第59张图片
第十五章 AJAX请求_第60张图片
第十五章 AJAX请求_第61张图片
第十五章 AJAX请求_第62张图片
第十五章 AJAX请求_第63张图片
第十五章 AJAX请求_第64张图片

6.jQuery的getJSON方法

第十五章 AJAX请求_第65张图片
第十五章 AJAX请求_第66张图片
第十五章 AJAX请求_第67张图片
第十五章 AJAX请求_第68张图片
第十五章 AJAX请求_第69张图片

7.jQuery的serialize方法

在这里插入图片描述
第十五章 AJAX请求_第70张图片
我们希望可以将表单中的内容获取到,并且以name=value的形式拼接,发送给服务器
第十五章 AJAX请求_第71张图片
第十五章 AJAX请求_第72张图片
第十五章 AJAX请求_第73张图片
得到的内容就是表单项的内容,人家已经获取并且拼接好了
第十五章 AJAX请求_第74张图片
如何在data项后面加上得到的参数,发送给服务器
第十五章 AJAX请求_第75张图片
下面我们可以在服务器获取参数
第十五章 AJAX请求_第76张图片
第十五章 AJAX请求_第77张图片

你可能感兴趣的:(JavaWeb,ajax,前端,javascript)