原始ajax的基本实现步骤
来源：互联网 发布：知乎 车枪球 编辑：程序博客网 时间：2024/06/05 04:06
一：传统的web项目中，用户的每次页面操作都会产生一个Http请求发送给服务器，服务器接收到请求处理完数据后会返还一个界面给前段，这样用户的每次操作都将会得到一个新的界面。
二：ajax由多种技术合成的一个访问服务器的技术。可实现异步访问局部刷新界面，其核心技术是XmlHttpRequest
三：基本实现步骤
3. 1.创建ajax引擎
3. 1.1 IE浏览器
if(window.XMlHttpRequest){
xhr = new XMLHttpRequeest();
}
3.1.2 非IE浏览器
if（window.ActiveXObject）{
xhr = new ActiveXObject(Microsoft.XMLHTTP);
}
3.2 指定回调函数（复写onreasystatechange（）方法）
xhr.onreadystatechange=function(){
....
}
3.3 创建请求
xhr.open("请求方式","url","是否异步");
说明：请求方式为get请求是，参数在url后面直接追加，若为post请求则在send()方法中传参格式为“name=”+name+"pswd="+pswd,且用post请求是必须设置请求头信息
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
3.4 发送请求
xhr.send();
四：代码整体参考
4.1前端
<script type="text/javascript">function submit(){var name=document.getElementById("username").value;var xhr;//创建ajax引擎if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else if(window.AtiveXObject){xhr = new ActiveXObject("Microsoft.XMLHTTP");}//指定回调函数（复写onreadystatuschange方法）xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){var result = xhr.responseText;alert(result);}}};//创建请求xhr.open("post", "${pageContext.request.contextPath}/loginServlet",true);xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');//发送请求xhr.send("name="+name);}</script><body>用户名：<input type="text" name="username" id="username" /><input type="button" name="tijiao" value="提交" onclick="submit()"/> </body>
4.2 后台@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {resp.setContentType("type=text/html,cahrset=utf-8");resp.setCharacterEncoding("utf-8");String name = (String)req.getParameter("name");System.out.println("name---"+name);resp.getWriter().write(name);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");resp.setContentType("type=text/html,charset=utf-8");String name=req.getParameter("name");System.out.println(name);resp.getWriter().write(name);}
0 0
- 原始ajax的基本实现步骤
- 实现Ajax的基本步骤
- 实现AJAX的基本步骤
- 实现AJAX的基本步骤
- 实现AJAX的基本步骤
- 实现AJAX的基本步骤
- AJAX的基本实现步骤
- 实现AJAX的基本步骤
- 实现AJAX的基本步骤
- 实现AJAX的基本步骤
- AJax的原始实现方法
- Ajax的五个步骤（最原始的）
- ajax编程的基本步骤
- Ajax实现的步骤
- 最原始的AJAX
- struts2原始的ajax
- AJAX 的原始写法
- Ajax 的基本实现
- Android面试题-解决字体适配
- 前端框架Vue.js的使用及具体页面跳转时的参数传递
- Android的listView的一级优化
- Android设置全屏方法
- 矩阵快速幂模板
- 原始ajax的基本实现步骤
- AES算法
- Android下的任务和Activity栈（以及taskAffinity属性） (2011-03-08 09:32:05)转载▼
- 正则表达式基础
- 花名 瓜枣
- 弱校联盟con#8(凸包）
- Java内部类详解
- STL实现Ugly Numbers 注解
- QT QML初体验随笔之QQuickView(1)
