• AJAX(Asynchronous JavaScript and XML),异步的javaScript与XML
  • AJax中一个重要的对象是XMLHttpRequest.
function ajaxSubmit() {
    var xmlHttpRequest = null; //声明一个空象以接收XMlHttpRequest对象
    if (window.ActiveXObject) { //IE浏览器
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) { //除IE的其他浏览器实现
        xmlHttpRequest = new XMLHttpRequest();
    }
    if (null != xmlHttpRequest) {
        var v1 = document.getElementById("value1ID").value;
        var v2 = document.getElementById("value2ID").value;

        xmlHttpRequest.open("GET", "Ajaxservlet?v1=" + v1 + "&v2=" + v2 ",true");
        //POST请求
        xmlHttpRequest.open("POST", "Ajaxservlet");
        //关联好ajax回调函数
        xmlHttpRequest.onreadystatechange = ajaxCallback;

        //真正向服务器发送数据()
        xmlHttpRequest.send(); //如果是post，就要写你要发的信息
        //POST方法提交，
        //默认的表单方式，请求头
        xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2 ");
   }
}"

3.使用Ajax准备向服务器端发送请求，

xmlHttpRequest.open("GET", "Ajaxservlet", "true");
function ajaxCallback() {
    alert("test");
    //完全收到服务器的响应
    if (xmlHttpRequest.readyState == 4) {
        //服务器没有抛异常，给我们正确的结果了
        if (xmlHttpRequest.status == 200) {
            var responseText = xmlHttpRequest.responseText;
            document.getElementById("div1").innerHTML = responseText;
        }
    }
}

4.调用Ajax, onclick=”ajaxSubmit();” 

js中，name的话取第0个元素，如果是id,则直接getElementById

doGet {
    String v1 = request.getParameter("v1");
    String v2 = request.getParameter("v2");

    String v3 = String.valueOf(Integer.valueOf(v1) + Integer.valueOf(v2));
    PrintWrite out = response.getWriter();
    System.out.println("doGet invoked");
    response.setHeader("pragma", "no-cache");
    response.setHeader("cache-control", "no-cache);
    out.flush();
 }

jquery 

引入jquery

开始写jquery 口号：write less,do more 

ready方法的作用是当页面中的dom加载完毕后，开始执行函数中的参数 

跟onload很像

<script type="text/javascript">$ {
    document
  }.ready(function() {
    alert("hello world");
  });
  //底层通过循环来实现
  //click是一个方法
  $(document).ready(function() {
    $("a"),
    click(function() {
      alert("hello world");
    });

  });</script>

html:

<h1>javascript
  <h1>

    <body>
      <a href="#">test1</a>
      <br>
      <a href="#">test2</a>
      <br>
      <a href="#">test3</a>
      <br>
      <div id="clickme"></div>
    </body>

$(document).ready(function(){
              var pElement =document.getElementByTagName("p")[0]; //将DOM对象转变成jQuery对象
             var pElementjQuery=$(pElement);
             alert("DOM对象结果："+pElement.innerHTML);
             alert("jQuery对象的结果："+pElementjQuery.html());
             var cm=$("#clickme");//获得的是jQuery对象
             //jQuery对象转换为Dom对象(第一种方式）
             var t=cm[0];//t是dom对象
             alert(t.innerHTML);
})

Ajax及jQuery学习的更多相关文章

  1. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  2. jQuery学习（2）ajax()使用

      在上一篇分享JavaScript之使用AJAX(适合初学者)中,我们学习了如何在JavaScript中使用AJAX.由于jQuery出色的性能和简洁的写法,且它也支持AJAX的使用,所以,本次分享 ...

  3. (高级篇)jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  4. jQuery学习笔记之jQuery的Ajax（3）

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  5. jquery学习笔记(五)：AJAX

    内容来自[汇智网]jquery学习课程 5.1 ajax AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新. AJAX = 异步 JavaScript 和 XML ...

  6. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  7. jQuery学习之jQuery Ajax用法详解（转）

    [导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...

  8. jQuery学习小结3——AJAX

    一.jQuery的Ajax方法 jQuery对Ajax 做了大量的封装,使用起来也较为方便,不需要去考虑浏览器兼容性.对于封装的方式,jQuery 采用了三层封装: 最底层的封装方法为——$.ajax ...

  9. jQuery学习之旅 Item10 ajax快餐

    1. 摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...

随机推荐

  1. mysql常见的优化需要注意的点

    1.explain分析explian引用索引基数show indexes from table_name;主键索引具有最好的基数 测试时 不走缓存SELECT SQL_NO_CACHE id from ...

  2. nginx 网络模型,cpu亲和等优点

    nginx优点1.IO多路复用epollIO多路复用:多个描述符的I/O操作都能在一个线程内并发交替地顺序完成,这里的"复用" 指的是复用同一个线程epollIO多路复用的实现方式 ...

  3. linux系统运维面试题简答

    1.     简述常用高可用技术 解答: Keepalived:Keepalived是一个保证集群高可用的服务软件,用来防止单点故障,使用VRRP协议实现.在master和backup之间通过mast ...

  4. 项目实战15.2—企业级堡垒机 jumpserver快速入门

    必备条件 硬件条件 ① 一台安装好 Jumpserver 系统的可用主机(堡垒机) ② 一台或多台可用的 Linux.Windows资产设备(被管理的资产) 服务条件 (1)coco服务 ① 鉴于心态 ...

  5. Oracle知识梳理（一）理论篇：基本概念和术语整理

    理论篇:基本概念和术语整理 一.关系数据库           关系数据库是目前应用最为广泛的数据库系统,它采用关系数据模型作为数据的组织方式,关系数据模型由关系的数据结构,关系的操作集合和关系的完整 ...

  6. Linux shell查询ip归属地

    起因 有的时候写脚本需要能够在脚本中获取到ip的归属地,比如分析登录日志列出攻击者的相关信息等. 可以使用whois来查询ip的详细信息,但是whois并不是每台机器预装的,而且我想看中文的结果,所以 ...

  7. android JNI的.so库调用

    在一篇博客中看到一篇文章,感觉描述的还可以: 在前面的博客中介绍的都是使用java开发Android应用,这篇博客将介绍java通过使用jni调用c语言做开发 为了更加形象的介绍jni,先观察下面的图 ...

  8. iOS开源加密相册Agony的实现（四）

    简介 虽然目前市面上有一些不错的加密相册App,但不是内置广告,就是对上传的张数有所限制.本文介绍了一个加密相册的制作过程,该加密相册将包括多密码(输入不同的密码即可访问不同的空间,可掩人耳目).Wi ...

  9. Ubuntu等Linux系统显卡性能测试软件 Unigine 3D

    Ubuntu等Linux系统显卡性能测试软件 Unigine 3D Ubuntu Intel显卡驱动安装,请参考: http://blog.csdn.net/zhangrelay/article/de ...

  10. ROS机器人程序设计（原书第2版）学习镜像分享及使用说明

    ROS机器人程序设计(原书第2版)学习镜像分享及使用说明 系统用于ROS爱好者学习交流,也可用于其他用途,并不局限于ROS. 这款镜像文件是基于一年前的Ubuntu ROS Arduino Gazeb ...