外贸公司 网站网站综合排名信息查询
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为 myservletxhr.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-8request.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 stubrequest.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为 myservletxhr.open("post","./myservlet",true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//发送数据xhr.send("text="+peoplestr);
}
下面是在前端控制台看到的结果：
这样就成功实现了ajax的前后端数据交互=￣ω￣=
emmmm，新人写博客，希望能对努力学习的小伙伴们提供一定的帮助~~
有什么不懂可以私信联系博主，emmm,先这样,hhhhh