js ajax - mark

来源：互联网发布：软件破解教程编辑：程序博客网时间：2024/06/02 00:28
@{    ViewBag.Title = "Index";}<!doctype><html><head><meta charset='utf-8' /><title>js obj test</title><script>function my_ajax(){this.method = 'POST';//请求的类型；GET 或 POSTthis.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, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=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";}
0 0