Ajax及jQuery学习

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, οnclick=”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学习相关推荐

jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
jQuery学习笔记（Ajax）
jQuery对Ajax操作进行了封装,在jQuery中$.ajax方法属于最底层的方法,第2层是$.load().$.get().$.post()方法,第3层是$.getScript()和$.getJ ...
jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
JQuery学习系列（九）AJAX
什么是 AJAX? AJAX = Asynchronous JavaScript and XML. AJAX 是一种创建快速动态网页的技术. AJAX 通过在后台与服务器交换少量数据的方式,允许网页进 ...
jQuery学习记录--ajax
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.原生JavaScript中的Ajax 1.创建Ajax对象: 2.连接到服务器 3.发送请求 4.接收返回值二. ...
如何快速入门Ajax（学习笔记）—— 原生ajax、jQuery、axios
如何快速入门Ajax 1. 服务器的基本概念客户端与服务器 URL地址网页中如何请求数据资源的请求方式 2. 了解Ajax Ajax是什么 Ajax的应用场景 3. jQuery中的Ajax g ...
JQuery学习笔记02-选择器把需要的东西揪出来(基础)
学习了功能超级强大的jQuery选择器,真的不知道如何用语言描述这些功能了,比葫芦画瓢写了个程序,来说明各种选择器的功能... <!DOCTYPE html PUBLIC "-//W3 ...
推荐JQuery学习简介
"从零学习jQuery"系列教程收到了很多人喜欢, 也完成了一本介绍jQuery的书: "jQuery风暴" 在这里向大家郑重推荐这本书. 写书的时候jQuer ...
Ajax、jQuery基础入门视频教程
关注公众号,免费获取资料本视频是Ajax和jQuery基础入门视频,该视频针对接触过javaScript基础的学员录制,授课讲究通俗易懂.通过该视频的学习,相信您能够轻轻松松地掌握Ajax和jQue ...
jQuery 学习之路（1）：引子
一.主流 javascript 库除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...

Ajax及jQuery学习

Ajax及jQuery学习相关推荐

最新文章

热门文章