原生ajax与伪ajax

原生ajax源码

 1 function GetXHR(){
 2             var xhr = null;
 3             if(XMLHttpRequest){
 4                 xhr = new XMLHttpRequest();        #如果没有XMLHttpRequest对象就使用ie的ActiveXObject("Microsoft.XMLHTTP")对象
 5             }else{
 6                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
 7             }
 8             return xhr;
 9 
10         }
11 
12         function XhrPostRequest(){
13             var xhr = GetXHR();
14             // 定义回调函数
15             xhr.onreadystatechange = function(){
16                 if(xhr.readyState == 4){
17                     // 已经接收到全部响应数据，执行以下操作
18                     var data = xhr.responseText;
19                     console.log(data);
20                 }
21             };
22             // 指定连接方式和地址----文件方式
23             xhr.open('POST', "/test/", true);
24             // 设置请求头
25             xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); #使用POST的方法是需要加一个请求头
26             // 发送请求
27             xhr.send('n1=1;n2=2;');
28         }
29 
30         function XhrGetRequest(){
31             var xhr = GetXHR();
32             // 定义回调函数
33             xhr.onreadystatechange = function(){
34                 if(xhr.readyState == 4){
35                     // 已经接收到全部响应数据，执行以下操作
36                     var data = xhr.responseText;
37                     console.log(data);
38                 }
39             };
40             // 指定连接方式和地址----文件方式
41             xhr.open('get', "/test/", true);
42             // 发送请求
43             xhr.send();
44         }
45         
46     jQuery的ajax提交在返回函数这里
47     success：function(arg,a1,a2)这几个参数里面有一个就是XMLHtt

View Code

伪ajax操作源码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <!--<input type="text" id="url"/>
 9 <input type="button" value="提交" onclick="iframerequest();"/>
10 <iframe id="iframe" src="https://www.baidu.com"> </iframe>-->
11 {#伪ajax提交#}
12 <input type="text">
13 <form action="/ajax_json/" method="POST" target="iframe1">
14     <iframe id="ifml" name="iframe1" onload="iframeload();"></iframe>
15     {% csrf_token %}
16     <input type="text" name="username"/>
17     <input type="text" name="email"/>
18     <input type="submit" value="form提交" onclick="sunmit()"/>
19 </form>
20 <script src="/static/jquery.js"></script>
21 
22 <script>
23    /* function iframerequest(){
24     var url=$('#url').val();
25     $('#iframe').attr('src',url)*/
26    /* function iframeload(){
27         console.log('233333')
28     }*/
29     function sunmit(){
30         $('#ifml').load(function () {
31             var text=$('#ifml').contents().find('body').text();
32             var obj = JSON.parse(text);
33             console.log(obj)
34         })
35     }
36 </script>
37 </body>
38 </html>

View Code

 1 def ajax(request):
 2     print request.POST
 3     ret = {'code':True,'data':None}
 4     import json
 5     return  render(request,'ajax.html')
 6 
 7 def ajax_json(request):
 8     print request.POST
 9     ret = {'code':True,'data':request.POST.get('username')}
10     import json
11     return  HttpResponse(json.dumps(ret))

View Code

记录笔记

参考博客：
		http://www.cnblogs.com/wupeiqi/articles/5703697.html
	
	原生
	function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();        #如果没有XMLHttpRequest对象就使用ie的ActiveXObject("Microsoft.XMLHTTP")对象
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;

        }

        function XhrPostRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式  是否异步 true
            xhr.open('POST', "/test/", true);
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); #使用POST的方法是需要加一个请求头
            // 发送请求
            xhr.send('n1=1;n2=2;');
        }

        function XhrGetRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open('get', "/test/", true);
            // 发送请求
            xhr.send();
        }
		
	jQuery的ajax提交在返回函数这里
	success：function(arg,a1,a2)这几个参数里面有一个就是XMLHttpRequest，可以在这个对象里面取到所有想取的东西
	
	伪Ajax操作
	<iframe></iframe>标签
	<form action="/ajax_json/" method="POST" target="iframe1">
    <iframe id="ifml" name="iframe1" onload="iframeload();"></iframe>
    {% csrf_token %}
    <input type="text" name="username"/>
    <input type="text" name="email"/>
    <input type="submit" value="form提交" onclick="sunmit()"/>
</form>
	
	
	    function sunmit(){
        $('#ifml').load(function () {                    #给iframe的onload绑定事件，当执行onload的时候获取后台返回的数据，然后进行相关的操作
            var text=$('#ifml').contents().find('body').text();
            var obj = JSON.parse(text);
            console.log(obj)
        })
	时机：
		如果发送的是【普通数据】 -> jQuery，XMLHttpRequest，iframe

posted @ 2018-05-10 01:23 梦中琴歌阅读(277) 评论(0) 收藏举报

刷新页面返回顶部