ajax使用方式

1.JavaScript方式：

实例流程：输入用户名，ajax将用户名传给服务器，服务器调用方法到数据库中判断该用户名是否存在，将结果返回给ajax，ajax再将其显示在页面上

• 某种情况下调用方法（jsp）

  <input type="text" name="username" onblur="exists(this)">	<!-- 标签失去焦点时调用方法 -->
  <font color="red" id="info"></font>		<!-- 用来展示结果 -->
  

• ajax代码封装在方法内（JavaScript）

  function exists(input){
      // 1.创建XMLHttpRequest对象
      var req;
      // 判断浏览器版本
      if(window.XMLHttpRequest){		// IE7+,谷歌、火狐……
          req = new XMLHttpRequest();
      }else if(window.ActiveXObject){	// IE6以前的版本
          req = new ActiveXObject("Msxm12.XMLHTTP");
      }
  
      // 2.使用XMLHttpRequest对象创建请求（准备请求的一些细节）
      /**
       * req.open(method,url,asynch);
       * -method：请求类型，类似"get"或"post"的字符串
       * -url：服务器地址
       * -asynch：表示请求是否要异步传输，默认为true（表示在读取后面的脚本之前，不需要等待服务器的响应），
       * 		指定false：当脚本处理过程经过这点时，会停下来直到ajax请求执行完毕，再继续读取后面脚本
       */
      // req.open("get","ajax_Exists.jsp?username="+input.value,true);
      req.open("post","ajax_Exists.jsp",true);	// 这里用jsp模拟服务器，接收ajax传入的信息，并返回结果到ajax
      /**
       * 如果用post请求向服务器发送数据，需要将"Content-type"的首部设置为"application/x-www-form-urlencoded"，
       * 它会告知服务器正在发送数据，并且数据已经符合url编码了
       */
      req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  
      //3.绑定回调函数，监听响应的状态，写回调函数处理服务器返回的数据
      /**
       * 0代表未初始化，还没有调用open方法
       * 1代表正在加载，open方法已经调用，但还没有调用send方法
       * 2代表已经加载完毕，send已经调用，请求已经开始
       * 3代表交互中，服务器正在发送响应
       * 4代表完成，响应发送完毕
       */
      req.onreadystatechange=function(){	// 指定回调函数
          if(req.readyState == 4){	// 判断ajax请求的状态，如果是4则代表完成
              /**
               * 404代表没找到页面（not found）
               * 403代表禁止访问（forbidden）
               * 500代表内部服务器出错（internal service error）
               * 200代表一切正常（ok）
               * 304代表没有被修改（not modified）
               */
              if(req.status == 200){	//服务器响应正常
                  var result = req.responseText;	// 获取服务器响应数据
                  document.getElementById("info").innerHTML = result;		// 将服务器的结果显示出来
              }
          }
      }
  
      // 4.发送请求
      // req.send(null);	//火狐如果不传null会报错，get方式
      req.send("username="+input.value);	// ajax发送数据到服务器
  }
  

• 接收ajax传输的数据，处理后返回结果给ajax（jsp代码模仿服务器操作）

  <%
      String username = request.getParameter("username");
      BaseService service = new BaseServiceImpl();
      if (service.executeName(username)) {	// 查询方法
          response.getWriter().write("ok");
      } else {
          response.getWriter().write("no");
      }
  %>
  

2.jQuery方式（取代上面js代码，其他代码不变）：

1. 标准方式

    /*
   url：服务器地址
   method：请求方式
   async：是否采用异步方式
   data：请求参数，传入服务器
   dataType：服务器响应数据类型（text、json等）
   success: function (data){}：请求成功进入该回调函数，注意该data是服务器的返回值
   error: function (){}：请求失败的回调函数
   */
   $.ajax({
       url: "#",
       method: "post",
       async: true,
       data: "username="+username+"&password="+password,
       //data: {"username": username, "password": password},
       dataType: "text",
       success: function (data) {
           // 响应成功后进行的操作，如判断返回值
       	if (data.trim() == "yes") {
       		alert("ok");
   		}
   	},
       error: function () {
       	alert("服务器错误...");
       }
   });
   

2. 两种jQuery简化版

   $.post("#", {"username": username, "password": password}, function (data) {
   	if (data.trim() == "yes") {
   		alert("登录成功");
       } else {
           alert("登录失败");
       }
   });
   

   $.get("#", {"username": username, "password": password}, function (data) {
       if (data.trim() == "yes") {
       	alert("登录成功");
       } else {
       	alert("登录失败");
       }
   });