各类微网站建设,wordpress 块,深圳外贸公司网站建设公司排名,html5 做手机网站用JS实现post和get两种方式异步刷新
1#xff0c;Ajax是个啥玩意#xff1f; Ajax 即Asynchronous JavaScript And XML, 指一种创建交互式#xff0c;快速动态网页应用的网页开发技术#xff0c;无需加载整个网页的情况下#xff0c;能够更新部分网页的技术。…用JS实现post和get两种方式异步刷新
1Ajax是个啥玩意 Ajax 即Asynchronous JavaScript And XML, 指一种创建交互式快速动态网页应用的网页开发技术无需加载整个网页的情况下能够更新部分网页的技术。 2异步刷新是个啥玩意 用js里面的XMLHttpRequest对象来和servlet交互来实现数据的交换这里只讲js的实现方式。 3为什么要有异步刷新 提交表单内容到jsp页面再jsp转发重定向这样会把整个页面都给查一遍是整个页面哦。所以不让整个页面刷新就用了ajax让页面局部刷新。 4用一个使用电话号码注册的小demo来解释 后台servlet
protected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {// 设置编码req.setCharacterEncoding(utf-8);resp.setCharacterEncoding(utf-8);// 文本类型 resp.setContentType(text/html; charsetutf-8);String mobile req.getParameter(mobile);System.out.println(mobile);PrintWriter out resp.getWriter();if (19999999999.equals(mobile)) {// 存在号码out.write(true);} elseout.write(false);out.close();}
get方式
前台页面
电话号码input typetext id mobile/ br/button onclick getRegister()注册/buttonscript typetext/javascriptfunction getRegister() {// get 方式实现异步var mobile document.getElementById(mobile).value;xmlHttp new XMLHttpRequest();// 打开连接xmlHttp.open(get,jsServlet?mobile mobile, true);// xmlHttp.setRequestHeader(, ); get不用设置头信息// get发送null post 发送key valuexmlHttp.send(null);xmlHttp.onreadystatechange rollBack;}function rollBack() {// 服务器响应是否有此号码 true/falsevar result xmlHttp.responseText;// status 200 是服务器正常响应 readyState 4是xmlhttp将响应信息全部读取完毕if (xmlHttp.status 200 xmlHttp.readyState 4) {alert(result);if (result true) alert(注册失败号码存在);else alert(注册成功。);}}
/scriptpost方式
电话号码input typetext id mobile/ br/button onclick postRegister()注册/buttonscript typetext/javascriptfunction postRegister() { var mobile document.getElementById(mobile).value; xmlHttp new XMLHttpRequest();// 打开服务器连接xmlHttp.open(post, jsServlet, true);// 设置头信息有两种是否上传文件的区别xmlHttp.setRequestHeader(Content-Type, application/x-www-form-urlencoded);// xmlHttp.setRequestHeader(Content-Type, multipart/form-data);// 发送数据 key value 的方式xmlHttp.send(mobile mobile);// 回调函数执行完这段js后在调用的函数xmlHttp.onreadystatechange rollBack;}function rollBack() {var result xmlHttp.responseText;if (xmlHttp.readyState 4 xmlHttp.status 200) {alert(result);if (result true)alert(注册失败号码已经存在);elsealert(注册成功。);}}/script
