八十八

最新推荐文章于 2022-05-20 15:52:21 发布

assssaas

最新推荐文章于 2022-05-20 15:52:21 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/assssaas/article/details/107325941

版权

Ajax

Ajax（异步刷新技术）：不刷新整个页面。只刷新局部

与传统web的差别
发送请求方式不同：传统web—— 浏览器发送同步请求
Ajax技术 —— 异步引擎对象发送请求

服务器响应不同：传统web —— 相应内容是一个完整页面
Ajax技术 —— 相应内容只是需要的数据
客户端处理方式不同：传统web —— 需等待服务器相应完成并重新加载整个页面后用户才能操作
Ajax技术 —— 可以动态更新页面中的部分内容，不影响用户在页面进行其他操作

Ajax技术核心：提供异步发送请求的能力

ajax的操作步骤

          // 1,创建XMLHttpRequest对象
      xmlHttpRequest = createXLHttpRequest(); // 自己定义的函数
          //  2，设置回调函数
          xmlHttpRequest.onreadystatechange = callBack;
          //  3,初始化XMLHttpRequest组件
          var url = "userServlet?name="+name;// 服务器端url地址，name为用户名文本框获取的值
          xmlHttpRequest.open("GET",url,true);
          // 4，发送请求
          xmlHttpRequest.send(null);


          /*若使用post方式发送请求
          var url = “uesrSerlvet”；// 服务器端url地址
          xmlHttpRequset.setRequestHeader(""Content-Type","application/x-www-form-urlencoded");
          var data = "name"+name;// 需要发送的数据信息，name为用户名文本框获取的值
          xmlHttpRequest.send(data); 
          */

      // ajsx回调函数
          function callBack() {
              if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                  var data = xmlHttpRequest.responseText;
                  if (data == "true"){
                      $("#nameDiv").html("用户名已被使用！");
                  } else {
                      $("#nameDiv").html("用户名可以使用！");
                  }
              }
          }


 // 创建xmlHttpRequest对象
 	 function createXLHttpRequest() {
 	     if (window.XMLHttpRequest){
 	         return new XMLHttpRequest();
 	     } else {
 	         return new ActiveXObject("Microsoft.XMLHTTP");
	     }
 }

jQuery提供了用于发送Ajax请求的函数
$.get()方法作用是使用get方式发送异步请求
$.post()方法作用是使用post方式发送异步请求
$.ajax()方法可以更多的控制请求的细节

$.ajax()方法
$.ajax([options])
参数名称		类型	说明
url		String	请求的URL地址（默认为当前页面）
type		String	请求方式（post或get，默认为get）
data		String	发送到服务器的数据
dataType	String	返回格式内容，可以是：xml，html，script，json，text
async		String	默认值：true，所有请求均为异步请求
				若想发送同步请求，设置为false
success		Function 请求成功后的回调函数

使用serialize（）方法可序列化元素，将DOM元素内容序列化为字符串，用于Ajax请求