开发者学堂课程【Ajax：什么是JDBC】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/31
打包ajax生成小工具
创建request对象的方法如下
如果函数就叫ajax，需要数据要知道请求方式，需要请求url也需要是否异步，也有可能存在请求体params或者是有回调方法，还有一种东西为服务器响应数据转换成什么类型，这些参数也可以打包，具体如下
option对象有如下属性
/*请求方式*. /method,
/*请求的ur1*/ url,
/*是否异步*/asyn,
/*请求体*/params,
/*回调方法*/callback
/*服务器响应数据转换成什么类型*/type
第一步要得到xmlHttp，具体方式如下
1.得到xmlHttp
*/var xm1Http = createXMLHttpRequest() ;
/*
第二步要打开链接，具体方式如下
* 2.打开连接
if(!option .method) [//€1iJGETR
option.method == "GET";
]
if(option.asyn == undefined) (//1i9##kb
I
option.asyn = true;
xmlHttp.open (option.method, option.url, option.asyn) ;]
|
第三步要判断是否为posT，具体方式如下
3.判断是否カPOsT
if("POST" == method) ｛
xmlHttp .setRequestHeader ("content -Type", "application/x-www- fprm-urlencoded") ;
|
第四步需要发送请求，具体方式如下
4.发送请求
xmlHttp. send (option.params) ;
|
最后一步要注册监听（双重判断），其中要进行获取服务器的响应数据，进行转换，例如if(type == "xml") l
data xmlHttp. responseXML;
I else if(type = "text")
data xmlHttp. responseText;
] else if(type == "json")
data xmlHttp. re sponseTexti
执行是data E eval ("("+ text t ")") ;
最后要调用回调方法 callback（data），具体如下
xmlHttp. onreadystatechange = function() {
if (xmlHttp. readyState == 4 && xmlHttp.status == 200) {//双重判断var data;
//获取服务器的响应数据，进行转换!
if(!option.type) {//如果type没有赋值， 那么默认为文本
data = xmlHttp. responseText;
} else if(option.type == "xm1") {
data = xmlHttp . responseXML;
} else if (option.type == "text") {
data = xmlHttp . responseText;
} else if (option.type == "json") {
var text = xmlHttp. re sponseText;
data = eval("(" + text + ")");
//调用回调方法
option.callback (dEta);
|
如果option对象要有如上属性，第二步就会有如下
if(loption.method) {//默认为GET请求
option.method == "GET";
1f (option.asyn == null) {//默认为异步 处理option.asyn = true;
kmlHttp method, ur1, asyn) ;这样就是在简化操作。
如果type没有赋值那么默认为文本。具体例子如下
* 5.注册监听
*/
xmlHttp . onreadystatechange = function() (
if (xmlHttp. readyState == 4 && xmlHttp.status == 200) [/18XT FI]®Fvar data;
//获取服务器的响应数据，进行转换!
if(!type) {//如果type没有赋值， 那么默认为文本|
data = xmlHttp. responseText;
] else if(type == "xml") f
data = xmlHttp . responseXML;
] else if(type == "text") [
I
data = xmlHttp. responseText;
] else if(type == "json") [
var text = xmlHttp. responseText;
data = eval ("(" + text + ")") ;
//调用回调方法callback (data) ;
|
要把data显示到 <h3 id="h3"></h3>中，具体如下
<script type= "text/javascript" src="<c:url value= '/ajax-lib/ajaxutils.js'/> ">/script>
<script type="text/javascript">
window.onload = function() ｛
var btn = document . getElementById ("btn") ;btn.onclick = function() l
/*
1. ajax
ajax(
I
url:"<c:url value=' /AServlet'/>",
type:"json",
callback: function (data) ｛
document getElementById("h3") . innerHTML = data.name + ", " + data.age + ", "+data.sex; } 最终的结果
|
![杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]](https://ucc.alicdn.com/pic/developer-ecology/xsqfoqm5pyibg_09d05e48e8364b9588701e9347609934.gif)