在本文中，您将会了解到关于Ajax笔记的新资讯，同时我们还将为您解释ajax书的相关在本文中，我们将带你探索Ajax笔记的奥秘，分析ajax书的特点，并给出一些关于Ajax技术一ajax提交表单jqu
在本文中，您将会了解到关于Ajax笔记的新资讯，同时我们还将为您解释ajax书的相关在本文中，我们将带你探索Ajax笔记的奥秘，分析ajax书的特点，并给出一些关于Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax、Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法、ajaxStart()与ajaxStop() | ajaxSend()与ajaxComplete() | ajaxError()、ajax使用总结-ajax的配置-ajax的调用-ajax的中文乱码-ajax的表单提交的实用技巧。
本文目录一览：- Ajax笔记（ajax书）
- Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax
- Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法
- ajaxStart()与ajaxStop() | ajaxSend()与ajaxComplete() | ajaxError()
- ajax使用总结-ajax的配置-ajax的调用-ajax的中文乱码-ajax的表单提交
Ajax笔记（ajax书）
Ajax简介
AJAX即“AsynchronousJavascriptAnd XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
实际应用如下
例如：检测注册的用户名时候已经被注册过
部分更新内容（查看下一页 / 上一页的订单）
Ajax的JQuery实现（推荐使用JQuery）
前端代码：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <!--使用百度的库，使用百度在线库-->
<script type="text/javascript">
$(document).ready(function(){ //确保在文档加载完之后才能运行
$("#name").change(function(){
$.ajax({
url:"CheckID",//请求路径 ，例子访问jsp虚拟路径已在web.xml配置好“/CheckID”
type:"POST",//访问类型 GET
dataType: "json",//一般常用json
data:{ //POST使用data: GET:自动转换成url路径参数
name: $("#name").val()
},success:function(s2){ //请求成功时的回调函数，变量为返回的json对象
alert(s2.isSet); //使用json对象
if(s2.isSet){
$("#isSetName").text("用户名已存在！");
alert("leo");
}else{
alert("false");
}
},error:function(jqXHR){ //请求失败时的回调函数
alert("请求失败");
}
});
});
});
</script>
</head>
<body>
<h3 id="t1">请填写注册信息</h3>
<form action="" method="post">
name: <input type="text" name="name" id="name"/><span id="isSetName"></span><br/>
password: <input type="password" name="password"/><br/>
<input type="submit" value="提交注册"/>
</form>
</body>
</html>
后端代码：
public class CheckID extends HttpServlet {
/**
* @see HttpServlet#doGet(HttpServletRequest request,HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request,HttpServletResponse response) throws servletexception,IOException {
String string = "{\"isSet\":\"true\"}";
//response.setContentType("application/json"); //最好加上返回文本格式
response.getWriter().println(string);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request,HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request,IOException {
this.doGet(request,response);
}
}
web.xml配置：
<servlet>
<description></description>
<display-name>CheckID</display-name>
<servlet-name>CheckID</servlet-name>
<servlet-class>com.ajax.CheckID</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckID</servlet-name>
<url-pattern>/CheckID</url-pattern>
</servlet-mapping>
Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax
Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法
1 什么是ajax
ajax是一种用来改善用户体验的技术，其本质是利用浏览器提供的一个对象(XMLHttpRequest,也可称之为ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完整 的页面),浏览器利用这些数据对当前页面做部分更新； 整个过程，页面无刷新，不打断用户的操作。
注意1：异步请求，指的是，当ajax对象发请求时，浏览器不会销毁当前页面，用户仍然可以对当前页面做其它的操作。
注意2：打电话可以看成是同步请求，发短信可以看成是异步请求
注意3：AJAX 不是一门的新的语言，而是对现有技术的综合利用；本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
2 如何获取ajax对象
3 ajax对象的几个重要属性
a.onreadystatechange:绑订一个事件处理函数， 该函数用来处理readystatechange事件。
注：当ajax对象的readystate属性值发生了改变， 比如，从0变成了1，则会产生readystatechange事件。
b.readyState:有5个值(0,1,2,3,4),表示ajax对象与服务器通信的进展。其中，4表示ajax对象已经获得了服务器返回的所有的数据。
c.responseText:获得服务器返回的文本数据。
d.responseXML:获得服务器返回的xml数据。
e.status:获得状态码。
4 使用ajax的编程步骤
step1. 获得ajax对象。
比如 var xhr = getXhr();
step2. 发送请求。
方式一: get请求
xhr.open('get','checkuname.do?uname=Sally',true); xhr.onreadystatechange = f1; xhr.send(null);
参数1：请求方式
参数2：请求地址
参数3：异步还是同步
true:异步请求（默认是异步请求，二货才用ajax来实现同步请求【特殊情况除外】）
false:同步请求(当ajax对象发送请求时，浏览器会锁 定当前页面，用户不能够对当前页面做任何操作）。
方式二: post请求
xhr.open('post','checkuname.do');
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange = f1; xhr.send('uname=Sally'); 注： 按照http协议要求，如果发送的是post请求， 在请求数据包里面，应该包含有content-type消息头; 默认情况下，ajax对象不会添加该消息头，所以需要 调用setRequestHeader方法来添加。 step3. 编写服务器端的程序。通过只需要返回部分 数据（不再需要返回完整的页面）。 step4. 写事件处理函数。 例如: function f1(){ if(xhr.readyState == 4 && xhr.status == 200){ //获得服务器返回的数据 var txt = xhr.responseText; //更新页面 ... } }
ajaxStart()与ajaxStop() | ajaxSend()与ajaxComplete() | ajaxError()
《1》
ajaxStart() 设置当前第一个AJAX请求开始时执行的处理函数。
ajaxSend() 设置在AJAX请求被发送前执行的处理函数。
ajaxComplete() 设置当AJAX请求完成(无论成功或失败)时执行的处理函数。
ajaxStop() 设置当前最后一个AJAX请求结束时执行的处理函数。
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
</head>
<body>
<label for="UserId">请输入用户的ID编号:</label><input type="text" id="UserId" name="UserId"/>
<input type="button" id="btnClick" value="提交" />
<div id="loadMes"https://www.jb51.cc/tag/dis/" target="_blank">display:none">我正在努力加载中哦.....</div>
<div id="loadData"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
</head>
<body>
<label for="UserId">请输入用户的ID编号:</label><input type="text" id="UserId" name="UserId"/>
<input type="button" id="btnClick" value="提交" />
<div id="loadMes"https://www.jb51.cc/tag/dis/" target="_blank">display:none">我正在努力加载中哦.....</div>
<div id="loadData"></div>
</body>
</html>
<script type="text/javascript">
$(function () {
$("#btnClick").click(function () {
var id = $("#UserId").val();
$.get("loadHandler.ashx",{ id: id },function (data,status,jsXHR) {//为了测试error这里填写了一个找不到的URL地址
$("#loadData").text(data);
}).error(function (XMLHttpRequest,textStatus,errorThrown) { alert(XMLHttpRequest.statusText) }).success(function (data,jsXHR) { alert(status) });
});
//--------------------------ajaxStart()与ajaxStop()这两个全局事件必须绑定在document元素上。
//在Ajax异步发送请求时，遇到网速比较慢的时候，就会出现请求比时间较长的问题，用户等的不耐烦就会关闭页面。而如果在请求期间能给用户一些提示。比如：正在努力加载中... 那么用户可能会等久一点，体验就业好一些了。
//jquery提供了两个全局事件，ajaxStart()和ajaxStop() 这两个全局事件，只要用户触发了Ajax,请求开始（仅仅是准备开始请求，还未完成请求）那么就会触发ajaxStart()这个事件。 当用户请求结束的时候就会触发ajaxStop()事件
$(document).ajaxStart(function () { $("#loadMes").show(); }).ajaxStop(function () { $("#loadMes").hide(); alert("加载完毕") });
//当然我们也可以分开来写
$(document).ajaxStart(function () { alert("我是start") });
$(document).ajaxStop(function () { $("#loadMes").hide(); alert("请求完毕") })
//----------------ajaxSend()与ajaxComplete()这两个全局事件必须绑定在document元素上。
//ajaxSend()函数用于设置当AJAX请求即将被发送时执行的回调函数。(它比ajaxStart()稍微慢一点。一般而言，连续执行多个AJAX请求，只有其中的第一个AJAX请求会触发ajaxStart事件。等到所有AJAX请求执行完毕后，再次连续执行多个AJAX请求，还是只有其中的第一个AJAX请求会触发ajaxStart事件。 )
//ajaxComplete()函数用于设置当AJAX请求完成(无论成功或失败)时执行的回调函数。
$(document).ajaxSend(function () { $("#loadMes").show(); }).ajaxComplete(function () { $("#loadMes").hide(); })
//----------------------ajaxError()这个全局事件只能绑定在document元素上（）
//这是一个全局AJAX事件函数，用于为任何AJAX请求的ajaxError事件绑定事件处理函数
$(document).ajaxError(function (event,jsXHR,settings,errorType) {
//第一个参数（事件对象）
alert(event.type); //打印出：ajaxError 即：触发的事件
alert(event.target); //打印出：[object HTMLDocument] 即：触发事件的元素
//第二个参数
alert(jsXHR.statusText); //第二个参数是一个XMLHttpRequst对象
//第三个参数 详情请参照http://www.w3school.com.cn/jquery/ajax_ajax.asp
for (var a in settings) {
document.write(a + "<br/>") //通过打印得知：其实这个settings就是本次AJAX请求的所有参数设置：详情如下
/*
url 注意：settings是一个对象。以下都是这个对象的属性或者方法
type
isLocal
global
processData
async
contentType
accepts
contents
responseFields
converters
flatOptions
xhr
jsonp
jsonpCallback
success
dataTypes
crossDomain
hasContent
*/
}
alert(settings.url); //打印出：loadHandler.ashx?id=v 即：发生错误的请求url
alert(settings.type);//打印出：GET 即：发生错误的请求的请求方式
alert(settings.global) //打印出：true 即：是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件
alert(settings.async); //打印出：true 即请求为异步。 如果是false 表示请求为同步
alert(settings.dataTypes); //打印出：text,html 即：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断 */
for (var b in settings.contents) { //contents是一个对象
document.write(b + "<br/>") //打印出： xml,html,json,script
}
//第四个参数 （错误描述）
alert(errorType); //打印出：Internal Server Error :即发生错误的类型 ，内部服务器错误
})
})
</script>
ajax使用总结-ajax的配置-ajax的调用-ajax的中文乱码-ajax的表单提交
·jquery的使用 0、必须优先引入jquery.js 否则无法调用jquery框架 1、js区分大小写，起名字的时候要注意 2、jquery根据div的id属性获取页面text的值：$("#demoID").val()，根据class属性获取页面text的值$(".demoCLASS").val(),如果是赋值$("#demoID").val("赋值的参数") 3、$(document).ready(function(){代码})、$().ready(function(){代码})、$(function(){代码})的含义一样 4、多个$(function(){代码})可以并存，即只要名字不重复可以同时发挥作用 5、$(function(){代码})的意思是页面加载完毕即运行，比如自动点击，自动弹框，再或者点击监听或者其他监听 6、加载完即点击和“点击的监听”的区别（非常有借鉴意义） 比如现在有一个js方法，function demoFunction(){alert("这个方法运行了");}; 加载完即点击：$("#demoid").click(demoFunction()); 加载完后即监听，这个方法只能是在按钮有click这个动作，或者通过jquery有click()动作：$("#demoid").click(function(){demoFunction()}); 7、如果是自动加载即运行的，或者需要被监听的都需要放置到$(document).ready(function(){代码})的代码中 8、window.onload=function(){代码}与$(function(){代码})的区别 ·调用函数的用法不同： window.onload = function(){代码}; $(function(){代码}) ·调用函数的时间不同 window.load=function(){代码}：必须等待网页中所有的内容加载完毕（包括图片）才能执行，比如要运用上传等功能。 $(function(){代码})，等到网页中所有的DOM结构绘制完毕后就可以执行。 9、AJAX专题 ·需要的jar包：commons-lang-2.5.jar、commons-lang3-3.1.jar、javassist-3.11.0.GA.jar ·前台js的写法：为了简化流程，写成页面加载即运行 $(document).ready(function(){ $.ajax({ url : "testajax.do",// 请求地址 //timeout : 600000,//超时时间设置，单位毫秒 async : false,// 异步 cache : false,// 缓存 type : 'post',// 请求方式 data: {"name":"123"},//data: $('#formid').serialize(),//序列化表单-当触发一个form表单提交的ajax事件的时候，这个序列化方法自动将数据转化围殴json格式传递给后台 dataType : 'json',// 服务器返回的数据类型 success : function(msg) {// 请求成功后调用的 alert("返回json的实验成功了"+" msg.resultcode="+msg.resultcode+" msg.name="+msg.name); },error :function(){ alert("异常"); } }); }); ·struts.xml文件的写法 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <!--略去一些struts2的配置信息--> <package name="myajax" extends="json-default" namespace="/"> <global-results> <result name="message" type="json"> <param name="root">message</param> </result> </global-results> <action name="*"method="{1}"> <result name="list">/index.jsp</result> </action> </package> <!-- 包含的其他配置文件 --> <include file="struts-method.xml"></include> </struts> ·后台java代码：仅距离调用ajax，故不涉及数据库操作 import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.Map; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; public class AjaxTest { protected Map<String,Object> message = new HashMap<String,Object>(); /** AJAX请求返回RESULT的name常量*/ protected final static String MESSAGE = "message"; public Map<String,Object> getMessage() { return message; } public void setMessage(Map<String,Object> message) { this.message = message; } //-登录页面中form表单提交的路径 public String testajax() throws IOException{ System.out.println("获取参数name="+ServletActionContext.getRequest().getParameter("name")); message.put("resultcode","0000"); message.put("resultcode","0001"); message.put("name","zhong文ce试"); return MESSAGE; } } ·ajax的应用之提交form表单数据-表单数据自动转json格式 场景描述：当具体的提交信息为一个form表单，并通过ajax传递给后台时，我们通常使用一个叫序列化的方法将这个form表单转化为json格式传递给后台。 ·form表单的格式，form标签有id，input标签有name <form id="formid"> 姓名：<input type="text" name="name" value="张三"/><br> 年龄：<input type="text" name="age" value="12"/><br> <input type="submit" value="提交" id="submitid"/> </form> ·js部分的代码-可以单独写在一个js文件，注意，需要先引入jquery.js文件 $(document).ready(function(){ $("#submitid").click(function(){ajaxhere()}); }); //提交表单的ajax function ajaxhere(){ $.ajax({ url : "testajax3.do",// 请求方式 data: $('#formid').serialize(),//序列化表单 dataType : 'json',// 服务器返回的数据类型 //contentType:"application/x-www-form-urlencoded; charset=utf-8",success : function(msg) {// 请求成功后调用的 alert("form表单触发的实验成功了"+" msg.resultcode"+msg.resultcode+" msg.name="+msg.name); },error :function(){ alert("异常"); } }); }; ·传统的ajax返回方式，即java部分的返回写在流里-特别要注意这里的处理中文乱码的解决方式 HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("utf-8"); PrintWriter writer = response.getWriter(); String a = "{\"resultcode\":\"0000\",\"name\":\"文试\"}"; writer.write(a); writer.flush(); writer.close();
今天关于Ajax笔记和ajax书的介绍到此结束，谢谢您的阅读，有关Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax、Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法、ajaxStart()与ajaxStop() | ajaxSend()与ajaxComplete() | ajaxError()、ajax使用总结-ajax的配置-ajax的调用-ajax的中文乱码-ajax的表单提交等更多相关知识的信息可以在本站进行查询。
本文标签：
