ajax简单封装

忘是亡心i 2022-09-25 04:29 161阅读 0赞

function ajax(method, url, data, success) \{  
var xhr = null;  
try \{  
//第一步：获取XMLHttpRequest对象  
xhr = new XMLHttpRequest();  
\} catch (e) \{  
xhr = new ActiveXObject('Microsoft.XMLHTTP');  
\}  
  
//连接方式为Get  
if (method == 'get' && data) \{  
url += '?' + data;  
\}  
  
//第二步：打开连接  
xhr.open(method,url,true);  
  
//第三部：发送请求  
if (method == 'get') \{  
//get方式发送请求  
xhr.send();  
\} else \{  
//post方式发送请求  
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');  
xhr.send(data);  
\}  
  
//第四步：判断服务器是否响应成功  
xhr.onreadystatechange = function() \{  
  
if ( xhr.readyState == 4 ) \{  
if ( xhr.status == 200 ) \{  
success && success(xhr.responseText);  
\} else \{  
alert('出错了,Err：' + xhr.status);  
\}  
\}  
  
\};

\}

测试：

index.jsp:

<script src="js/ajax.js"></script>  
  
<script>  
window.onload = function()\{  
suc=function(data)\{  
alert(data);  
\};  
ajax("get","my.jsp","",suc);  
\};  
  
</script>

my.jsp:

<%@ page language="java" import="java.util.\*" pageEncoding="UTF-8"%>  
<%  
response.setHeader("content-Type", "html/text;charset=utf-8");  
response.getWriter().write("Hello World!!");  
%>

效果：

![Center][]

[Center]: /images/20220718/a8ef97b44ba5443cb458870881306b56.png

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 Promise简单封装ajax请求

注意: Ajax函数里ourl参数可选。 function Ajax(method, url, ourl) { return new Promise(

ゝ一纸荒年。/ 2023年06月06日 08:29/ 0 赞/ 28 阅读

相关封装ajax

封装原则把可能会变动的内容,都给弄参数,让用户传递进来 function aa({ url,type='get',async=true,data,success,e

╰+攻爆jí腚メ/ 2022年12月20日 02:49/ 0 赞/ 140 阅读

相关 ajax封装及简单调用

封装js部分 //公共url var baseUrl='http://localhost:8080/' //公共ajax封装 fu

朱雀/ 2022年10月05日 13:51/ 0 赞/ 190 阅读

相关 ajax简单封装

function ajax(method, url, data, success) \{ var xhr = null; try \{ //第一步：获取XMLHtt

忘是亡心i/ 2022年09月25日 04:29/ 0 赞/ 162 阅读

相关 Ajax工作原理以及函数的简单封装

什么是AJAX？ AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而

绝地灬酷狼/ 2022年07月16日 11:41/ 0 赞/ 164 阅读

相关 AJAX封装

function ajax({type,url,data,dataType}){ return new Promise(function(resolve)

Bertha 。/ 2022年06月04日 08:57/ 0 赞/ 261 阅读

相关 AJAX封装

ajaxutils.js // 创建request对象 function createXMLHttpRequest() { try {

Dear 丶/ 2022年06月04日 05:57/ 0 赞/ 269 阅读

相关 ajax封装

封装js: $.conf = { tip:function(){ }, surl:function(url)

亦凉/ 2022年05月14日 02:05/ 0 赞/ 291 阅读

相关简单的ajax封装

// ajax发送post请求返回 json 数据 function requestJSON(params) \{ params.dataType = 'json';

- 日理万妓/ 2022年04月11日 07:11/ 0 赞/ 353 阅读

相关封装ajax

初始化AJAX要有四步： 1 初始化XHR对象 2 设置onreadystatechange事件 3 调用open方法 4 调用send方法 onread

不念不忘少年蓝@/ 2021年09月02日 05:48/ 0 赞/ 510 阅读