Ajax及jQuery学习

来源：互联网发布：脸上突然长黄褐斑知乎编辑：程序博客网时间：2024/05/23 01:13

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); })

0 0