ajax 基础详细讲解 附小例子

ajax 基础详细讲解 附小例子

ajax概述

ajax是一种组合技术(JavaScript,HTML,CSS,XML, DOM,XMLHttpRequest），全拼为：Asynchronous javascript and XML。它是一种在无需重新加载整个网页的情况下，就能够更新部分网页的技术。

ajax的特色：异步传输

借助JavaScript内部的XMLHttpRequest对象可以进行异步数据传输，使用户在等待服务器返回数据的同时，可以进行页面的其他操作。

ajax实现流程：

1.创建XMLHttpRequest对象

var xhr=new XMLHttpRequest();

2.设置回调函数onreadystatechange,接收服务器端的信息以进行处理。onreadystatechange 监控readyState的变化，如果readyState变化，则触发该函数配置请求参数

xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
        //此时就可以用 xhr.responseText 接收后端servlet发来的数据
        var data=xhr.responseText;
    }
}

这里说一下readyState属性（表示XMLHttpRequest对象的状态 ）的五个值：

​ 0 ：Uninitialized ，初始化状态。表示XMLHttpRequest 对象已创建或已被 abort() 方法重置。

​ 1 ：Open ，表明open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。

​ 2 ：Send，表明Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。

​ 3 ：Receiving，表明所有响应头部都已经接收到。响应体开始接收但未完成。

​ 4 ：Loaded,表明HTTP 响应已经完全接收。

只有当xhr.readyState ==4 的时候，才可以去接收后端servlet发来的数据。

3.使用open方法发送请求

//下面是open方法的使用方法
xhr.open("请求方式post/get","url 请求地址",[true]/false 是否异步);
//如果此处的第一个参数为post的话，要发送数据到服务器就要用send方法。
//而如果是get方式的话 则 (下面写的servlet是指你请求的url地址)
xhr.open("get","servlet?key="+value,true);

4.设置编码方法

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

5.使用send方法发送请求到服务器并接收回应

//其中参数const为要发送到服务器的内容 例如 var value="迪迦";
//								xhr.send("key="+value);
xhr.send(const);
//当open方法的请求方式为post时，用send方法发送数据。否则
xhr.send(null);

以上是ajax在前端js代码中的使用方法

而后端中，emmmm

举个例子

首先，我在html中创建了两个input输入框来分别输入学号，姓名

	学号：<input type="text" id="code"/><br/>
	姓名：<input type="text" id="name"/><br/>
	<input type="button" onclick="synchronizeSubmitInfo()" value="提交"/>

用onclick方法来实现ajax传输，下面是synchronizeSubmitInfo()在js中的定义

function synchronizeSubmitInfo(){
    	//获取id为code的text框输入的值
		var code=document.getElementById("code").value;
   		//获取id为name的text框输入的值
		var name=document.getElementById("name").value;
    	//创建一个people对象，将其定义成JSON格式的字符串对象
		var people={"code":code,"name":name};
		var xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
                //此处安排在后面说 先说从前端发送数据给后端 以及后端的响应
		}
            //JSON.stringify方法：将对象字符串化 --> json，emmm,变成json对象
			var peoplestr=JSON.stringify(people);
            //post请求方式，请求url为 myservlet
			xhr.open("post","./myservlet",true);
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //发送数据
			xhr.send("text="+peoplestr);
}

接下来，是后端代码

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//下面两句是防止乱码搞的，嗯就是字面意思，设置字符格式为utf-8
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
    	//用request.getParameter方法来接收ajax发送来的数据，text即为ajax发送的数据名
		String text=request.getParameter("text");
		//创建一个Gson对象，需要引入Gson的jar包
    	Gson gson=new Gson();
    	//gson.fromJson方法，把接收到的json转化为javabean的格式，注意后面参数应为.class的形式
	    People people=gson.fromJson(text, People.class);
    	//这里则是用控制台测试一下得到的数据
		System.out.println(people);
		System.out.println(people.getCode());
	}

上面是输入之后的数据，嗯在控制台得到的结果为:

说明得到了数据，异步传输成功

接下来是后端传数据到前端，emmm还是一样的例子

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("utf-8");
		String text=request.getParameter("text");
		Gson gson=new Gson();
	    People people=gson.fromJson(text, People.class);
		System.out.println(people);
		System.out.println(people.getCode());
		//以上是 后端接收前端数据的代码
    	//下面是  后端发送数据的代码 (*/ω＼*)
    	//创建一个People对象，用set方法对其赋值
    	People people1=new People();
		people1.setName("英宗徐");
		people1.setCode("22;
    	//用gson.toJson("对象")方法，将java对象(javabean)转化成json格式的字符串
		String json=gson.toJson(people1);
    	//把json格式的字符串发送给前端
		response.getWriter().print(json);
	}

然后是前端js代码(ง •_•)ง

function synchronizeSubmitInfo(){
    	//获取id为code的text框输入的值
		var code=document.getElementById("code").value;
   		//获取id为name的text框输入的值
		var name=document.getElementById("name").value;
    	//创建一个people对象，将其定义成JSON格式的字符串对象
		var people={"code":code,"name":name};
		var xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function(){
               if(xhr.readyState==4){
                   //用xhr.responseText接收到后端发来的json格式的字符串数据
					var people=xhr.responseText;
                   //用JSON.parse方法，把people转化为json对象
					var s=JSON.parse(people);
                   //在前端的控制台打印出json对象
                   	  console.log(s);
				}
		}
            //JSON.stringify方法：将对象字符串化 --> json，emmm,变成json对象
			var peoplestr=JSON.stringify(people);
            //post请求方式，请求url为 myservlet
			xhr.open("post","./myservlet",true);
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //发送数据
			xhr.send("text="+peoplestr);
}

下面是在前端控制台看到的结果：

这样就成功实现了ajax的前后端数据交互=￣ω￣=
emmmm，新人写博客，希望能对努力学习的小伙伴们提供一定的帮助~~

有什么不懂可以私信联系博主，emmm,先这样,hhhhh