打包ajax生成小工具|学习笔记

2022-07-05 20

简介： 快速学习如何打包ajax生成小工具

+关注继续查看

开发者学堂课程【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

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") [

data = xmlHttp. responseText;

] else if(type == "json") [

var text = xmlHttp. responseText;

data = eval ("(" + text + ")") ;

//调用回调方法callback (data) ;

要把data显示到 <h3 id="h3"></h3>中，具体如下

window.onload = function() ｛

var btn = document . getElementById ("btn") ;btn.onclick = function() l

1. ajax

ajax(

url:"<c:url value=' /AServlet'/>",

type:"json",

callback: function (data) ｛

document getElementById("h3") . innerHTML = data.name + ", " + data.age + ", "+data.sex;

}

最终的结果