qq群推广引流免费网站,新沂徐州网站开发,运城市网站建设,济南网络招聘ajax 基础详细讲解 附小例子
ajax概述
ajax是一种组合技术(JavaScript,HTML,CSS,XML, DOM,XMLHttpRequest#xff09;#xff0c;全拼为#xff1a;Asynchronous javascript and XML。它是一种在无需重新加载整个网页的情况下#xff0c;就能够更新部分网页的技术。
aja…ajax 基础详细讲解 附小例子
ajax概述
ajax是一种组合技术(JavaScript,HTML,CSS,XML, DOM,XMLHttpRequest全拼为Asynchronous javascript and XML。它是一种在无需重新加载整个网页的情况下就能够更新部分网页的技术。
ajax的特色异步传输
借助JavaScript内部的XMLHttpRequest对象可以进行异步数据传输使用户在等待服务器返回数据的同时可以进行页面的其他操作。
ajax实现流程
1.创建XMLHttpRequest对象
var xhrnew XMLHttpRequest();2.设置回调函数onreadystatechange,接收服务器端的信息以进行处理。onreadystatechange 监控readyState的变化如果readyState变化则触发该函数配置请求参数
xhr.onreadystatechangefunction(){if(xhr.readyState4){//此时就可以用 xhr.responseText 接收后端servlet发来的数据var dataxhr.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?keyvalue,true);4.设置编码方法
xhr.setRequestHeader(Content-type,application/x-www-form-urlencoded);5.使用send方法发送请求到服务器并接收回应
//其中参数const为要发送到服务器的内容 例如 var value迪迦;
// xhr.send(keyvalue);
xhr.send(const);
//当open方法的请求方式为post时用send方法发送数据。否则
xhr.send(null);以上是ajax在前端js代码中的使用方法
而后端中emmmm
举个例子
首先我在html中创建了两个input输入框来分别输入学号姓名 学号input typetext idcode/br/姓名input typetext idname/br/input typebutton onclicksynchronizeSubmitInfo() value提交/用onclick方法来实现ajax传输下面是synchronizeSubmitInfo()在js中的定义
function synchronizeSubmitInfo(){//获取id为code的text框输入的值var codedocument.getElementById(code).value;//获取id为name的text框输入的值var namedocument.getElementById(name).value;//创建一个people对象将其定义成JSON格式的字符串对象var people{code:code,name:name};var xhrnew XMLHttpRequest();xhr.onreadystatechangefunction(){if(xhr.readyState4){//此处安排在后面说 先说从前端发送数据给后端 以及后端的响应}//JSON.stringify方法将对象字符串化 -- jsonemmm,变成json对象var peoplestrJSON.stringify(people);//post请求方式请求url为 myservletxhr.open(post,./myservlet,true);xhr.setRequestHeader(Content-type,application/x-www-form-urlencoded);//发送数据xhr.send(textpeoplestr);
}接下来是后端代码
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 textrequest.getParameter(text);//创建一个Gson对象需要引入Gson的jar包Gson gsonnew Gson();//gson.fromJson方法把接收到的json转化为javabean的格式注意后面参数应为.class的形式People peoplegson.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 textrequest.getParameter(text);Gson gsonnew Gson();People peoplegson.fromJson(text, People.class);System.out.println(people);System.out.println(people.getCode());//以上是 后端接收前端数据的代码//下面是 后端发送数据的代码 (*/ω*)//创建一个People对象用set方法对其赋值People people1new People();people1.setName(英宗徐);people1.setCode(22;//用gson.toJson(对象)方法将java对象(javabean)转化成json格式的字符串String jsongson.toJson(people1);//把json格式的字符串发送给前端response.getWriter().print(json);}然后是前端js代码(ง •_•)ง
function synchronizeSubmitInfo(){//获取id为code的text框输入的值var codedocument.getElementById(code).value;//获取id为name的text框输入的值var namedocument.getElementById(name).value;//创建一个people对象将其定义成JSON格式的字符串对象var people{code:code,name:name};var xhrnew XMLHttpRequest();xhr.onreadystatechangefunction(){if(xhr.readyState4){//用xhr.responseText接收到后端发来的json格式的字符串数据var peoplexhr.responseText;//用JSON.parse方法把people转化为json对象var sJSON.parse(people);//在前端的控制台打印出json对象console.log(s);}}//JSON.stringify方法将对象字符串化 -- jsonemmm,变成json对象var peoplestrJSON.stringify(people);//post请求方式请求url为 myservletxhr.open(post,./myservlet,true);xhr.setRequestHeader(Content-type,application/x-www-form-urlencoded);//发送数据xhr.send(textpeoplestr);
}下面是在前端控制台看到的结果 这样就成功实现了ajax的前后端数据交互ω emmmm新人写博客希望能对努力学习的小伙伴们提供一定的帮助~~
有什么不懂可以私信联系博主emmm,先这样,hhhhh
