第十五章AJAX请求
1.什么是AJAX请求
2.原生JavaScript的AJAX的请求示例
用下面的页面来展示AJAX请求
其中就绑定了一个单机事件
下面就是这个页面
下面我们先写一个BaseServlet
下面再写一个类来继承BaseServlet类
进行配置
下面三步之后,就可以将请求发送给服务器了
如果下面我要访问这个person对象,由于客户端和服务器不在同一台电脑上,我们将person的地址返回给客户端是没有用的,客户端需要的是里面的数据
我们要将其转化成person格式的字符串,再将其返回给客户端
那么客户端如何接收请求呢
下面用alert我们看响应的信息
实际开发的时候,我们会将信息显示在页面上
3.AJAX请求的特点说明
当我发起请求后,真个页面除了div有变化,其他地方都没有变化(地址栏也没有变化)
下面我们看看以前的请求
我点击这个请求的时候,地址栏就发生了变化,原来的内容就都没有了
上面是AJAX的特点局部更新
下面我们看看AJAX另一个特点,异步请求
我们将true改为false,false表示同步
这里我们让其休眠3s
这里就是同步,浏览器先收到服务器的返回的数据,才去执行执行这个最后一行代码
下面是异步
我们将false改为true
改为true之后,他就不会等服务器返回数据之后,才去执行最后一行代码
而是在它休眠的时候,先去执行最后一行代码
他不会像同步那样等待
下面我们演示一下异步有什么用处
我们先将其改成同步
然后下面加几个按钮
我在点完第一个按钮后,其他的就点不动了
下面看看异步
异步就不会卡死
4.jQuery的AJAX方法
下面是服务器的代码
这个数据要更新到页码上面才行
我们上面的dataType为text需要我们转换为json对象
而datatype为json的时候,不需要转换
其中的data属性也可以换种写法
结果一模一样
5.jQuery的get和post方法
get和post请求的方法是完全一模一样的
6.jQuery的getJSON方法
7.jQuery的serialize方法
我们希望可以将表单中的内容获取到,并且以name=value的形式拼接,发送给服务器
得到的内容就是表单项的内容,人家已经获取并且拼接好了
如何在data项后面加上得到的参数,发送给服务器
下面我们可以在服务器获取参数