【Ajax】Ajax异步请求：请求(get/post)、响应、处理响应数据、与同步请求区别

Ajax异步请求：请求(get/post)、响应、处理响应数据、与同步请求区别

异步请求：
      浏览器发送异步请求，浏览器当前页面运行，不会受到任何中断
别名：局部跳转，局部刷新

（1）Ajax异步请求：get请求

编程语言：javascript的api
① 对象 XMLHttpRequest：
      作用：跟控制器请求，接受响应，异步请求
② xhr.open("请求类型GET|POST", "请求控制器的方法路径");
      作用：建立xhr和服务器端请求的连接
③ xhr.send();  ：/发送请求到对应的控制器

（2）Ajax异步请求：post请求

	① 初始化xhr对象：var xhr = new XMLHttpRequest();
        ② 建立xhr和服务器端的连接，方式: "post"
		xhr.open("post","/user/login.do"); 	//(“请求方式”, ”跳转路径uri”)
		xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//设置请求为post请求
	③ 发送请求
    	xhr.send("username=jiangwm&password=123");	//请求参数名1=值1&请求参数2=值2

（3）Ajax异步请求：响应及结果处理

	xhr工作状态：
          ① xhr工作状态：xhr.readyState
                xhr.readyState = 0        xhr初始化
                xhr.readyState = 1        建立xhr和服务器端的连接
                xhr.readyState = 2        发送xhr的请求
                xhr.readyState = 3        服务器处理xhr的请求					
                xhr.readyState = 4        服务器响应回到浏览器
            接收服务器响应的结果：xhr.readyState==4

          ② 事件函数：xhr.onreadystatechange (每次xhr的工作状态发生变化，函数调用一次)
                xhr.onreadystatechange = function(){
    	            if(xhr.readyState == 4){    // xhr.readyState == 4,代表获得了服务器响应结果，并返回到浏览器
        	        xhr.responseText;//获得服务器端响应的内容
    	            }
              }
          ③ xhr的相应结果属性：xhr.responseText;(服务器端，将响应字符串，赋值给xhr的responseText属性)
            xhr和服务器交互的状态码
	      提交到服务器后响应数据：
                  response.getWriter().write(“字符串数据信息”);
		  response.flushBuffer();
                ① 服务器响应给浏览器的状态码：
                  404		服务器端没找到资源
                  500		服务器代码运行异常
                  30X		服务器返回了Sendredirect命令，浏览器自动重定向
                  200		服务器运行一切正常，且正常响应了结果给浏览器
                ② 状态码属性：xhr.status;(服务器运行结果后的响应状态码，都会赋值给xhr.status属性)
                  if(xhr.status==200){
	                  //判断服务器正常
                  }

（4）同步请求与异步请求比较

      ① 同步请求：
            目前向服务器端发送http请求的方式：
                  ① 地址栏发请求 
                  ② form表单发送请求 
                  ③ 超链接发送请求
                  ④ window.location.href="http://xx/xxxs";触发请求 ⑤ img标签的src(本节除外)
            目前请求方式的缺点：
                  ① 浏览器：中断当前浏览器页面的所有运行内容:影响用户的体验；	
                        浏览器需要等待服务器处理完毕之后，才能继续运行。
                  ② 服务器：跳转回导致，跳转后的页面，全部重新通过网络传输，传递给浏览器: 
                        导致大量无用的网络传输,浪费网络带宽，浪费时间，性能较差
      ② 异步请求：局部刷新， 局部跳转，发送异步请求，不会影响当前页面的运行

Ajax的js代码封装

Ajax的js代码封装(解决代码冗余)
待更新。。。