ajax

Ajax简介

实际上ajax在开发中是必不可少的，因为除了刚开始下载页面外，其他的数据交互都是用它来进行的。

Asynchronouns Javascript And XML 异步JS和XML
是Javascript中能向服务器发送请求并获得响应的技术

作用：提高用户体验

传统的HTTP交互方式

Ajax进行HTTP交互后，更新部分页面

原生Ajax

XMLHttpRequest类

创建方法：

var xhr = new XMLHttpRequest();

常用方法：

• open("请求方法","URL",是否异步) 打开网络连接
  URL：是服务器的地址
  请求方法 ：GET、POST
  是否异步：true异步（推荐），false同步（会产生阻塞）
• send("参数") 向服务器发送参数
  一般用于POST方法，格式是：参数＝值＆参数＝值
  GET方法参数是写在URL后面

• onreadystatechange 监听网络状态的事件
  onreadystatechange = function(){
  //responseText就是从服务器发回的文字数据
  }

  常用属性：

• readyState 网络状态
  0 初始化，没有调用open
  1 连接，调用了open
  2 发送，调用了send
  3 开始响应，数据没有完全发送
  4 完成，数据发送完成

• status 响应代码
  200 ok
  404、403、405、500...

• responseText 响应的文字数据

• 注意：和Ajax进行交互的服务器必须用输出流的方式进行

Ajax的跨域访问问题

• 服务器的安全机制：
  服务器默认情况下，只允许当前项目中页面的JS来访问项目中的服务器程序，其他项目的页面不允许访问。(让文件在电脑的任何地方都能的访问，并非只有服务器)
• 方式：
  1. 让服务器允许页面访问
     响应对象.addHeader("Access-Control-Allow-Origin","*");
  2. JSONP

Jquery的Ajax

$.ajax(
{
    url:地址,type:请求方法类型,data:{参数:值,参数:值},async:是否异步true异步，false同步,success:function(响应的内容){
        成功后更新页面
    },error:function(){
        出现错误执行的代码
    }
})

//post方式
$.post(
    "URL",{参数:值,function(响应内容){
        ...
    });
//get方式
$.get("URL+参数",function(响应内容){
        ...
    });

案例：使用ajax实现用户名是否存在提示

1）添加按用户名查询用户的方法
2）DAO、Serivice实现该方法
3）在UserServlet添加按用户名查询的方法，以流返回数据给ajax
4）在用户名输入框失去焦点时，调用ajax，将用户名进行判断
5）通过服务器返回的结果，提示用户

作业：完善后台管理系统

1）添加和更新用户时进行用户名验证
2）页面美化和完善保姆管理功能

Bootstrap自己从官网自学即可