开发者社区> xaubllxwtvaqiu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 快速学习如何打包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

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

最后要调用回调方法 callbackdata),具体如下

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;

}

最终的结果

image.png



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
AJax学习笔记
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq1010885678/article/details/37538841 Ajax:   1.
820 0
AJAX学习笔记(一、初识)
AJAX学习笔记(一、初识)
37 0
慕课网Ajax学习笔记
慕课网Ajax全接触 Ajax全称:Asynchronous JavaScript and XML(异步的JavaScript和XML) 特点:在不必刷新整个网页的情况下实现局部更新,带来更好的用户体验。
1008 0
Ajax 安全性问题 | 学习笔记
快速学习 Ajax 安全性问题。
80 0
DataX学习笔记
DataX学习笔记
238 0
ExtJs学习笔记(5)_Ajax示例
ExtJs对于Ajax的使用非常简单,看下面的代码:   1.Html页:   DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
859 0
4101
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载