js ajax - mark

最新推荐文章于 2024-04-23 00:29:43 发布
继续去踢波
最新推荐文章于 2024-04-23 00:29:43 发布
阅读量564
点赞数
分类专栏： JS
本文链接：https://blog.csdn.net/LOW584710047/article/details/39501383
版权
JS 专栏收录该内容
23 篇文章 0 订阅
订阅专栏
@{
    ViewBag.Title = "Index";
}

<!doctype>

<html>
	<head>
		<meta charset='utf-8' />
		<title>js obj test</title>
		<script>

			function my_ajax(){
				this.method = 'POST';//请求的类型；GET 或 POST
				this.async = true;//true(异步)或 false(同步)
				this.url = null;//文件在服务器上的位置
				this.data = null;//发送数据
				this.after_method = null;//成功时调用的函数
			}

			//创建 XMLHttpRequest 对象
			my_ajax.prototype.create_xmlhttp = function(){
				var xmlhttp;
				if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
					xmlhttp=new XMLHttpRequest();
				}
				else{// code for IE6, IE5
					xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
				}
				return xmlhttp;
			}

			/*/
				同步：提交请求         -> 等待服务器处理(这个期间客户端浏览器不能干任何事) -> 处理完毕返回
				异步: 请求通过事件触发 -> 服务器处理(这时候浏览器仍然可以作其他事情)       -> 处理完毕返回
				async=false 时(同步),请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可
				xmlhttp.send();
				return xmlhttp.responseText;
			/*/

			//ajax提交
			my_ajax.prototype.operate_date = function(method, async, url, data, after_method) {
				var xmlhttp = this.create_xmlhttp();
				if(async == true){
				    xmlhttp.onreadystatechange = function () {
				        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				            after_method(xmlhttp.responseText);//异步返回结果
				        }
				    }
				}
				if(method == 'POST' && data != '') {//post数据(带发送数据)
					xmlhttp.open(method, url + '?ran=' + Math.random(), async);
					xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
					xmlhttp.send(data);
				}
				else{//其他方式
					xmlhttp.open(method, url + '?ran=' + Math.random() + data, async);
					xmlhttp.send();
				}
				if(async == false){
				    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						after_method(xmlhttp.responseText);//同步返回结果
				    }
				}
			    //留意弹窗顺序即可理解同步和异步的差别
			    //后台如果不设置延迟执行 很难看出差别的
				if (async == true) {
				    alert('后台函数设置延迟执行,异步提交,这时候浏览器仍然可以作其他事情');
				}
				else {
				    alert('后台函数设置延迟执行,同步提交,这时候浏览器要等服务器返回才可以继续执行');
				}
			}

			//get数据(单单请求)
			my_ajax.prototype.get_data = function () {
				this.operate_date(this.method, this.async, this.url, '', this.after_method);
			}

			//post数据(单单请求)
			my_ajax.prototype.post_data = function(){
				this.operate_date(this.method, this.async, this.url, '', this.after_method);
			}

			//get数据(带发送数据,附加在url上,'&name=lh&age=23')
			my_ajax.prototype.get_sent_data = function(){
				this.operate_date(this.method, this.async, this.url, this.data, this.after_method);
			}

			//post数据(带发送数据,'&name=lh&age=23')参数的值最好用 js的 encodeURIComponent 编码 主要是为了处理 & / 等字符
			my_ajax.prototype.post_sent_data = function () {
				this.operate_date(this.method, this.async, this.url, this.data, this.after_method);
			}

		</script>
	</head>
	<body>
        <input type="button" value="get_data" id="btn_get_data" />
        <input type="button" value="post_data" id="btn_post_data" />
        <input type="button" value="get_sent_data" id="btn_get_sent_data" />
        <input type="button" value="post_sent_data" id="btn_post_sent_data" />
	</body>

    <script>
        document.getElementById('btn_get_data').onclick = function () {
            var obj = new my_ajax();
            obj.method = 'GET';
            obj.async = false;//修改为true设置为异步
            obj.url = 'test/test';
            obj.after_method = function after_method(result) {
                alert(result);
            }
            obj.get_data();
        }
        document.getElementById('btn_post_data').onclick = function () {
            var obj = new my_ajax();
            obj.method = 'POST';
            obj.async = false;
            obj.url = 'test/test';
            obj.after_method = function after_method(result) {
                alert(result);
            }
            obj.post_data();
        }
        document.getElementById('btn_get_sent_data').onclick = function () {
            var obj = new my_ajax();
            obj.method = 'GET';
            obj.async = false;
            obj.url = 'test/test';
            obj.data = '&name=get_luohang&age=23'
            obj.after_method = function after_method(result) {
                alert(result);
            }
            obj.get_sent_data();
        }
        document.getElementById('btn_post_sent_data').onclick = function () {
            var obj = new my_ajax();
            obj.method = 'POST';
            obj.async = false;
            obj.url = 'test/test';
            obj.data = '&name=post_luohang&age=23'
            obj.after_method = function after_method(result) {
                alert(result);
            }
            obj.post_sent_data();
        }
    </script>
</html>

后台test函数(.net mvc 4.0 其它编程语言大同小异)

public string test()
{
        System.Threading.Thread.Sleep(2000);//延迟执行,毫秒
        if(Request["name"] != null && Request["age"] != "" ){
            return Request["name"] + "   " + Request["age"];
        }
        return "hello";
}