AJAX基础（深入了解）

最新推荐文章于 2020-06-18 08:40:55 发布

强颜欢笑康

最新推荐文章于 2020-06-18 08:40:55 发布

阅读量157

点赞数

分类专栏： javaweb 文章标签： JAVA AJAX 原理基础

本文链接：https://blog.csdn.net/qq_36503896/article/details/80413683

版权

javaweb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ajax原理

1.什么是ajax
Asynchronous JavaScript and Xml异步的JavaScript
和Xml

2. 实质

AJAX是一种用来改善用户体验的技术，使用XMLHttprequest对象异步的向服务器发送请求，服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容

3.异步对象的属性和方法

abort( ) 取消请求

getllResponseHeaders( ) 获取响应的所有Http头

getResponseHeader( ) 获取指定的Http头

open ( method,url ) 创建请求，method请求类型 get post

send( ) 发送请求

setRequestHeader( ) 指定请求的Http头

Onreadystatechange 发生任何状态变化时的事件控制对象

请求的状态有5个值分别表示Ajax与服务器的通信状态

0 尚未初始化

1 正在发送请求

readyState

2 请求完成

3 请求成功，正在接受数据

4 已接受服务器返回的所有数据

response Text 服务器返回的文本

responseXML 服务器返回的xml ,可以当做DOM处理

服务器返回的http请求响应值常用的有:

200 表示请求成功

202 请求被接受但处理未完成

status

400 错误的请求

404 资源未找到

500 内部服务器错误,如asp代码错误等

onreadystatechange

onreadystatechange :绑定一个事件处理函数,该函数用来处理readystatechange事件。

注:当Ajax对象的readyState的值发生了改变,比如从0变成了1 ,就会产生readystatechange事件

readyState

readyState :一共有5个值,分别是0,1,2,3,4,分别表示Ajax对象与服务器通信的状态比如,当值为4时,表示Ajax对象已经获得了服务器返回的所有的数据。

4.发送异步请求的步骤

①获取Ajax对象:获取XMLHttpRequest对象实例

②设置回调函数:为Ajax对象的onreadystatechange事件设定响应函数

③创建请求:调用XMLHttpRequest对象的open方法

④发送请求:调用Ajax对象的send方法

1.获取Ajax对象

function getXHR(){
	var xhr;
	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest
	}else{
                //IE浏览器
		xhr=new ActiveXObject("Microsoft.XMLHttp")
	}
	return xhr;
}

2.编写回调事件处理函数

function fun1(){
	var xhr = getXHR();
	
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4&&xhr.status ==200){
			var str = xhr.responseText;
			var nameSpanNode = document.getElementById("usernameSpan");
			if(str==0){
			nameSpanNode.style.color="red";
			nameSpanNode.innerHTML="用户被占用，无法注册";
				
			}if(str==1){
				nameSpanNode.style.color="blue";
				nameSpanNode.inntHTML="ok";
			}
		}
		
		
	};
	//获取文本框的值
	var usernameVal = document.getElementById("username").value;
        //此次测试为GET请求，GET,POST请求详情看下文
	xhr.open("GET","reg.do?username="+usernameVal,true);
	xhr.send();
}

3.1创建请求-GET请求
xhr.open( 'get',’xx.do',true )
注意:
true :表示发送异步请求(当Ajax对象发请求时,用户仍然可以对当前页面做其它的操作)。
false :表示发送同步请求(当Ajax对象发请求时，浏览器会锁定当前页面，用户不能对当前页面做其它操作)。

3.2创建清求-POST清求
xhr.open(' post',’Xx.do’,true);
xhr.setRequestHeader('content -type',
application/x-www-form-urlencoded)

setRequestHeader的作用:因内HTTP协议要求发送post请求吋,必須有content-type消息头,但是默认情况下xhr(即Ajax对象)不会添加该消息头,所以需要调用setRequestHeader方法,添加这个消息头。

4.发送请求

GET请求:xhr .send(null)

POST请求: xhr .send( name=value & name=value... )

GET请求:

send方法内传递null

若要提交数据，则在open方法的"URL" 后面追加

-如:xhr .open( "get",

"xx.do?name=value&name=value" ,

true)

5.编写服务器端代码

服务器返回的一般是部分数据,比如一个简单的文本。

public void service(HttpServletRequest request,

HttpServletResponse response)throws ServletException,IOException{

request.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

PrintWriter out = response.getWriter();

out.println(“用户名已经存在”);

}

//此次测试的服务器代码使用的是SSM框架

package cn.tedu.ajax.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class UserController {

   @RequestMapping("/xin.do")
   public String showReg() {
       return "showreg";
   }

   @RequestMapping("/reg.do")
   @ResponseBody
   public String reg(String username) {

       if("xinkang".equals(username)) {
           //用户名被占用，无法注册
           return "0";
       }else {
           //用户名没有注册，可以使用
           return"1";
       }
   }