js-ajax的简单实例

刚接触ajax，需要把原理性的东西先弄懂，然后再去使用封装比较高级的js框架，才能更加得心应手。

html代码：

  1. <html>
  2. <head>
  3. <title>MyFristAjax</title>
  4. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  5. <meta http-equiv="description" content="this is my page">
  6. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  7. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  8. <script type="text/javascript">
  9. //这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
  10. var xmlHttpRequest;
  11. //用户名校验的方法
  12. function verify() {
  13. var success = createXMLHTTPRequest();
  14. if (!success) {
  15. return;
  16. }
  17. var userName = document.getElementById("userName").value;//获取用户名字
  18. //2.注册回调函数
  19. xmlHttpRequest.onreadystatechange = callback;
  20. //3。设置连接信息
  21. //第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
  22. //第二个参数表示请求的url地址，get方式请求的参数也在url中
  23. //第三个参数表示采用异步还是同步方式交互，true表示异步
  24. //记住在url后面加上时间戳
  25. //xmlHttpRequest.open("GET", "OriginalityAjaxAction?username=" + userName, true);
  26. //4.发送数据，开始和服务器端进行交互
  27. //同步方式下，send这句话会在服务器段数据回来后才执行完
  28. //异步方式下，send这句话会立即完成执行
  29. //xmlHttpRequest.send(null);
  30. }
  31. //回调函数
  32. function callback() {
  33. //alert(xmlHttpRequest.readyState);
  34. //5。接收响应数据
  35. //判断对象的状态是交互完成
  36. if (xmlHttpRequest.readyState == 4) {
  37. //判断http的交互是否成功
  38. if (xmlHttpRequest.status == 200) {
  39. //获取服务器器端返回的数据
  40. //获取服务器段输出的纯文本数据
  41. var responseText = xmlHttpRequest.responseText;
  42. //将数据显示在页面上
  43. //通过dom的方式找到div标签所对应的元素节点
  44. var divNode = document.getElementById("result");
  45. //设置元素节点中的html内容
  46. divNode.innerHTML = responseText;
  47. } else {
  48. alert("出错了！！！");
  49. }
  50. }
  51. }
  52. //创建XMLHTTPRequest对象来进行AJAX的异步数据交互
  53. function createXMLHTTPRequest() {
  54. //1.创建XMLHttpRequest对象
  55. //这是XMLHttpReuquest对象无部使用中最复杂的一步
  56. //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
  57. if (window.XMLHttpRequest) {
  58. //针对FireFox，Mozillar，Opera，Safari，IE7，IE8
  59. xmlHttpRequest = new XMLHttpRequest();
  60. //针对某些特定版本的mozillar浏览器的BUG进行修正
  61. if (xmlHttpRequest.overrideMimeType) {
  62. xmlHttpRequest.overrideMimeType("text/xml");
  63. }
  64. } else if (window.ActiveXObject) {
  65. //针对IE6，IE5.5，IE5
  66. //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
  67. //排在前面的版本较新
  68. var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
  69. for ( var i = 0; i < activexName.length; i++) {
  70. try {
  71. //取出一个控件名进行创建，如果创建成功就终止循环
  72. //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
  73. xmlHttpRequest = new ActiveXObject(activexName[i]);
  74. break;
  75. } catch (e) {
  76. }
  77. }
  78. }
  79. //确认XMLHTtpRequest对象是否创建成功
  80. if (!xmlHttpRequest) {
  81. alert("XMLHttpRequest对象创建失败!!");
  82. return false;
  83. } else {
  84. //0 - 本地响应成功
  85. //alert(xmlhttp.readyState);
  86. return true;
  87. }
  88. }
  89. </script>
  90. </head>
  91. <body>
  92. 请输入要验证的用户名字(输入admin试试)：<br/>
  93. <input type="text" id="username"/><input type="button" value="校验" onclick="verify()"/>
  94. <div id="result"></div>
  95. </body>
  96. </html>

和servlet交互的，OriginalityAjaxAction.java代码如下：

Java代码  

  1. package web.action;
  2. import java.io.IOException;
  3. import java.io.PrintWriter;
  4. import javax.servlet.ServletException;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8. //对原始的ajax页面请求的控制器
  9. public class OriginalityAjaxAction extends HttpServlet {
  10. private static final long serialVersionUID = 1978049925174268801L;
  11. public void doGet(HttpServletRequest request, HttpServletResponse response)
  12. throws ServletException, IOException {
  13. doPost(request, response);
  14. }
  15. public void doPost(HttpServletRequest request, HttpServletResponse response)
  16. throws ServletException, IOException {
  17. request.setCharacterEncoding("UTF-8");
  18. String username = request.getParameter("username");
  19. response.setCharacterEncoding("UTF-8");
  20. PrintWriter out = response.getWriter();
  21. //将数据返回给页面
  22. if(username.equals("admin")){
  23. out.print("用户：[admin]已经被使用了");
  24. }else{
  25. out.print("用户：[" + username + "]可以使用");
  26. }
  27. }
  28. }

web.xml的servlet配置如下：

Xml代码  

  1. <servlet>
  2. <servlet-name>OriginalityAjaxAction</servlet-name>
  3. <servlet-class>web.action.OriginalityAjaxAction</servlet-class>
  4. </servlet>
  5. <servlet-mapping>
  6. <servlet-name>OriginalityAjaxAction</servlet-name>
  7. <url-pattern>/OriginalityAjaxAction</url-pattern>
  8. </servlet-mapping>

以上简单的页面和servlet交互，返回一个字符串结果。

ajax的核心重要组件XMLHttpRequest

XmlHttp是什么？

最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

XmlHttp对象的属性:

XmlHttp对象的方法:

如何发送一个简单的请求?
      最简单的请求是,不以查询参数或提交表单的方式向服务器发送任何信息.使用XmlHttpRequest对象发送请求的基本步骤:
      ● 为得到XmlHttpRequest对象实例的一个引用，可以创建一个新的XmlHttpRequest的实例。
      ● 告诉XmlHttpRequest对象,那个函数回处理XmlHttpRequest对象的状态的改变.为此要把对象的
         onreadystatechange属性设置为指向JavaScript的指针.
      ● 指定请求属性.XmlHttpRequest对象的Open()方法会指定将发送的请求.
      ● 将请求发送给服务器.XmlHttpRequest对象的send()方法将请求发送到目标资源.

时间： 2024-08-11 09:44:06

js-ajax的简单实例的相关文章

以最简单的登录为例，诠释JS面向对象的简单实例

JavaScript,是前端开发人员必须会的一门技术,从JS演变出来的有很多框架,先说说几个热门的框架吧: JQuery:这个技术必须会,如果不会,那一定要会查api,知道怎么写,要看得懂英文文档,这个框架十分流行,不论是刚入坑的开发者还是老油条,其实也都是是需要会的 BackBone:这个技术还不错,曾经的项目中用到过多次,很方便,是个MVC的实用框架,用来渲染视图十分简便 AngularJS:是个MVVM框架,和JQuery完全不一样,JQuery是基于dom元素的,而angerlar却不是

vue.js路由参数简单实例讲解------简单易懂

vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们提供命令行来安装 npm install vue-router --save 第二种,我们直接去官方github下载 https://github.com/vuejs/vue-router 路由参数设置 1,实例化一个路由,然后路由映射表中的地址带参数,这个参数就是路由的参数 接着给映射表中的路由设

js封装、简单实例源码记录

1.运动封装:doMove ( obj, attr, dir, target, endFn )  加入回调.&&.||用法注释 <script> var oBtn1 = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn1.onclick = function () { // doMove ( oDiv, 'width', 34, 600 ); doMove ( oD

JS的一些简单实例用法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../javascript/OutSideJs.js"></script>    <style>        .myStyle{  

Cookie和JS购物车的简单实例

最近学原生的Javascript,需要弄个购物车的功能,下面是利用cookie做的一个演示 思路其实很简单,商品界面通过value获取对应的值,然后把这个商品的各种信息放入一个字典:因为有多个商品,把这些商品的字典对象都放在一个数组里面就行了.然后通过JSON序列化这个这个数组,保存在cookie里面.在购物车界面通过读取cookie获取这些信息,然后动态地创建一个表格显示即可. 商品界面 <!DOCTYPE html> <html lang="en"> <

jquery ajax请求简单实例

jquery ajax 参数讲解网址: 点击查看 $.ajax({ type: "post", url: "url", data: { "id": id }, async:true, // 异步请求 cache:false, // 设置为 false 将不缓存此页面 dataType: 'json', // 返回对象 success: function(data) { console.log(data); }, error: function(d

Shell脚本简单实例（一）

#!/bin/bash # 以上是 Shell 脚本的解释器,开头必须要写,表示 Shell 脚本./bin/sh 更多的用于 UNIX 下,并且相比 Bash 少了一些特性.更多地使用 /bin/bash,但是在 Linux 中 /bin/sh 是 /bin/bash 的软链接. # Cleanup, version 3 LOG_DIR=/var/log    # 这里定义变量,一般都会定义经常用的内容,引用变量更专业更方便. ROOT_UID=0            # 只有 root 用

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 很庆幸,我又见到了末日后新升的太阳,所以我还能在这里写文章,言归正传哈,最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家. 什么是JSONP协议? JSONP即JSON w

AJAX学习整理二之简单实例

做了几个简单的实例,加载txt文本内容.加载xml文件内容,把xml文本内容转换成html表格显示.废话不多说,直接贴代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head>     <title>通过ajax获取文本内容</title>     <meta charset="utf-8">     <scr

js判断登陆用户名及密码是否为空的简单实例

js判断登陆用户名及密码是否为空的简单实例 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script type="text/javascript"> // 验证输入不为空的脚本代码 function checkForm(form) { if(form.username.value == "") { alert("用户名不能为空!"); form.username.focus(); return