AJAX入门学习-2:基于JS的AJAX实现(以Django为例)

小生博客:http://xsboke.blog.51cto.com

如果有疑问,请点击此处,然后发表评论交流,作者会及时回复。

                        -------谢谢您的参考,如有疑问,欢迎交流


一. ajax的实现操作流程

        实例对象:
                var xmlhttp = XMLHttprequest() 

        连接server端:
                xmlhttp.open("")

        发送数据:
                xmlhttp.send("")        # 请求体的内容    ,如果是GET请求就没有内容,内容在URL里面,写为send(null)

        监听:
                xmlhttp(if == 4:{var context = xmlhttp.responsetext})  # 判断服务器是否响应结束,其中4状态表示服务器响应结束

二. ajax第一样例,发送get请求

2.1 django的urls.py

        from django.contrib import admin
        from django.urls import path
        from django.conf.urls import url
        from ajax import views

        urlpatterns = [
            path(‘admin/‘, admin.site.urls),
            url(r‘^index‘,views.index),
            url(r‘ajax_receive‘,views.ajax_receive),
        ]

2.2 django的views.py

        from django.shortcuts import render,HttpResponse

        # Create your views here.

        def index(req):
            return  render(req,"index.html")

        def ajax_receive(req):
            return  HttpResponse("hello")

2.3 模板文件 index.html

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
        <button onclick="func1();">ajax提交</button>

        <script>
            // 生成一个xml对象
            function createXMLHttpRequest() {
                var xmlHttp;
                // 适用于大多数浏览器,以及IE7和IE更高版本
                try {
                    xmlHttp = new XMLHttpRequest();
                } catch (e) {
                    //适用于IE6
                    try {
                        xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
                    } catch (e) {
                        //适用于IE5.5,以及IE更早版本
                        try {
                            xmlHttp = new ActiveXObject(("Microsoft.XMLHTTP"));
                        } catch (e) {}
                    }
                }
                return xmlHttp;
            }

            // 实例化对象,打开连接,发送数据,返回数据
            function func1 () {
                //step1
                var xmlhttp = createXMLHttpRequest()        // 实例对象

                //step2
                xmlhttp.open("GET","/ajax_receive",true)    // 参数1:请求方式;参数二:请求接口;参数三:采用异步

                //step3
                xmlhttp.send(null);     // 发送数据

                //step4
                xmlhttp.onreadystatechange=function () {
                    if ( xmlhttp.readyState == 4 && xmlhttp.status == 200){
                        // alert(xmlhttp.status)     //返回HTTP码状态
                        // alert(xmlhttp.readyState) //返服务器响应状态,4位响应结束

                        var data = xmlhttp.responseText
                        alert(data)
                    }
                }
            }

        </script>
        </body>
        </html>

三. ajax第二样例,发送post请求

3.1 django的urls.py

        from django.contrib import admin
        from django.urls import path
        from django.conf.urls import url
        from ajax import views

        urlpatterns = [
            path(‘admin/‘, admin.site.urls),
            url(r‘^index‘,views.index),
            url(r‘ajax_receive‘,views.ajax_receive),
        ]

3.2 django的views.py

        from django.shortcuts import render,HttpResponse

        # Create your views here.

        def index(req):
            return  render(req,"index.html")

        def ajax_receive(req):
            if req.method == "POST":
                print("req.POST",req.POST)

            return  HttpResponse("hello2")

3.3 模板文件 index.html

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
        <button onclick="func1();">ajax提交</button>

        <!-- ajax和form都是和后端进行数据交互的,form的enctype和ajax设置请求头是一个道理,
        但是form是默认就有这个请求头的,所以我们在写form的时候不用特意指定请求头 -->
        <form action="//" method="post" enctype="application/x-www-form-urlencoded">
            <input type="text">
            <input type="text">
        </form>
        <script>
            // 生成一个xml对象
            function createXMLHttpRequest() {
                var xmlHttp;
                // 适用于大多数浏览器,以及IE7和IE更高版本
                try {
                    xmlHttp = new XMLHttpRequest();
                } catch (e) {
                    //适用于IE6
                    try {
                        xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
                    } catch (e) {
                        //适用于IE5.5,以及IE更早版本
                        try {
                            xmlHttp = new ActiveXObject(("Microsoft.XMLHTTP"));
                        } catch (e) {}
                    }
                }
                return xmlHttp;
            }

            // 实例化对象,打开连接,发送数据,返回数据
            function func1 () {
                //step1
                var xmlhttp = createXMLHttpRequest();        // 实例对象

                //step2
                xmlhttp.open("POST","/ajax_receive",true);    // 参数1:请求方式;参数二:请求接口;参数三:采用异步

                // POST方法需要设置一个请求头,如果不设置请求头,Web容器会忽略请求体的内容
                // POST方法需要设置请求头,是因为要提交的数据需要放在请求体里面
                // GET方法不需要是因为GET提交的主体是空的
                // 必须放在send之前,open之后,固定的POST参数
                xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                //step3
                // xmlhttp.send(null);     // 发送数据
                xmlhttp.send("name=dashan");  //POST向后台提交数据

                //step4
                xmlhttp.onreadystatechange=function () {
                    if ( xmlhttp.readyState == 4 && xmlhttp.status == 200){
                        // alert(xmlhttp.status)     //返回HTTP码状态
                        // alert(xmlhttp.readyState) //返服务器响应状态,4位响应结束

                        var data = xmlhttp.responseText;
                        alert(data)
                    }
                }
            }

        </script>
        </body>
        </html>

3.4 GET与POST的不同

        3.4.1 open方法改为了POST
        3.4.2 需要提交的数据写到send里面
        3.4.3 因为POST的Request体是有数据的,所以必须设置请求头

四. AJAX第三例(实现用户名是否已注册)

4.1 功能介绍

        在注册表单中,当用户填写了用户名后,把光标移开,会自动向服务器发送异步请求,服务器返回TRUE或False,
        返回true表示这个用户已经被注册过,返回false表示没有注册过

        客户端得到服务器返回的结果后,确定是否在用户名文本框后显示"用户名已被注册"的错误信息!

4.2 案例分析

        - 页面中给出注册表单
        - 在username表单字段中添加onblur事件,调用send()方法
        - send()方法获取username表单字段的内容,向服务器发送异步请求,参数为username
        - django的视图函数:获取username参数,判断是否为"yuan",如果是响应true,否则响应false

4.3 代码
4.3.1 django的urls.py

            from django.contrib import admin
            from django.urls import path
            from django.conf.urls import url
            from ajax import views

            urlpatterns = [
                path(‘admin/‘, admin.site.urls),
                url(r‘ajax_register‘,views.ajax_register),
            ]

4.3.2 django的views.py

            from django.shortcuts import render,HttpResponse

            # Create your views here.

            def ajax_register(req):

                if req.method == "POST":
                    username = req.POST.get("username")

                    if username == "dashan":
                        return HttpResponse("true")

                    return HttpResponse("false")

                return render(req,"register.html")

4.3.3 模板文件 register.html

            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
            </head>
            <body>
            <form>
                <p>用户名:<input type="text" name="username" onblur="func1(this);"></p>
                <span id="error"></span>
                <p>密码:<input type="password" name="passwd"></p>
                <input type="submit" value="提交">
            </form>

            <script>

                function createXMLHttpRequest() {
                    var xmlHttp;
                    // 适用于大多数浏览器,以及IE7和IE更高版本
                    try {
                        xmlHttp = new XMLHttpRequest();
                    } catch (e) {
                        //适用于IE6
                        try {
                            xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
                        } catch (e) {
                            //适用于IE5.5,以及IE更早版本
                            try {
                                xmlHttp = new ActiveXObject(("Microsoft.XMLHTTP"));
                            } catch (e) {}
                        }
                    }
                    return xmlHttp;
                }

                function func1(self) {
                    var username = self.value;

                    var xmlhttp = createXMLHttpRequest();
                    xmlhttp.open("POST","/ajax_register",true);
                    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                    xmlhttp.send("username="+username);  // 如果是变量的话,必须这样写,等于号在双引号里面

                    xmlhttp.onreadystatechange=function(){
                        if(xmlhttp.readyState==4 && xmlhttp.status==200){

                            var s = xmlhttp.responseText
                            if (s == "true"){
                                document.getElementById("error").innerHTML="用户名已存在"
                            }
                        }

                    }
                }
            </script>
            </body>
            </html>

原文地址:http://blog.51cto.com/xsboke/2350451

时间: 2024-10-10 07:51:05

AJAX入门学习-2:基于JS的AJAX实现(以Django为例)的相关文章

Ajax入门学习原始代码

<script type="text/javascript">        window.onload = function () {            //1.创建xmlhttprequest对象            var xhr = createXHR();            function createXHR() {//为了兼容新老IE的版本                var request;                if (typeof(X

AJAX入门学习-1:理解ajax

小生博客:http://xsboke.blog.51cto.com 如果有疑问,请点击此处,然后发表评论交流,作者会及时回复. -------谢谢您的参考,如有疑问,欢迎交流 一. 什么是ajax ajax:asynchronous javascript and xml,异步javascript和xml,即使用javascript语言与服务器进行异步交互,传输的数据库为 xml(当然,传输数据的不只是xml) ajax还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷

AJAX异步学习总结(1)

AJAX异步学习总结(1) AJAX异步学习总结(1) ①:运用HTML和CSS来实现页面,表达信息: ②:运用XMLHttpRequest和服务器进行数据的异步交换: ③:运用JavaScript操作DOM,实现动态局部刷新: HTTP请求 HTTP是一个无状态的链接 一个完整的HTTP请求过程,7个步骤 建立TCP连接: WEB浏览器向WEB服务器发送请求命令: Web浏览器发送请求头信息: Web服务器应答: Web服务器发送应答头信息: Web服务器向浏览器发送数据: Web服务器关闭T

[AJAX]AJAX的入门学习

AJAX入门 听了方老师的课程,配上了阮一峰阮老师的教程食用,整理记录一些使用AJAX所需的知识点. 什么是AJAX Asynchronous JavaScript and XML 的缩写,指的是通过 JavaScript 的异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页. 为什么使用AJAX 首先整理总结一下主要发送HTTP请求的方式及其优缺点 form 可以发请求,但是会刷新页面或新开页面 a可以发 get 请求,但是也会刷新页面或新开页面 i

基于JS的DOM 编程基础和Json语法及JS下的AJAX基础

1.在dom编程中:     注意:使用dom操作一般在页面完全载入之后,一般在window_onload事件里操作dom nodeName  表示节点的名称如:<input   type= "button"  value="确定" />    此时nodeName=“input” ; nodeValue  表示节点的值如<p>aaa</p> 此时的nodeValue="aaa",而nodeName="

基于jquery的ajax分页插件(demo+源码)

前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客园学习了很多的知识,看过很多人的分享.说来也惭愧,自己没能为园友们分享自己的所学所得(毕竟水平比较差). 过去的一年也是辗转了几个城市换了几份工作(注定本命年不太平?).八月份来到现在所在的公司(OTA行业),公司是做互联网的,所以可能大家的前端都屌屌的?之前一直从事.NET开发(现在在这边也是),

ASP.NET AJAX入门系列(8):自定义异常处理

ASP.NET AJAX入门系列(8):自定义异常处理 在UpdatePanel控件异步更新时,如果有错误发生,默认情况下会弹出一个Alert对话框显示出错误信息,这对用户来说是不友好的,本文看一下如何在服务端和客户端脚本中自定义异常处理,翻译自官方文档. 主要内容 1.在服务端自定义异常处理 2.在客户端脚本中自定义异常处理 一.在服务端自定义异常处理 1.添加ASPX页面并切换到设计视图. 2.在工具箱中AJAX Extensions标签下双击ScriptManager和UpdatePane

ASP.NET AJAX入门系列

ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET AJAX入门系列(1):概述 导读:作为本系列文章的开篇,简单介绍一下ASP.NET AJAX的概况及各个组成部分. ASP.NET AJAX入门系列(2):使用ScriptManager控件 导读:ScriptManager控件包括在ASP.NET 2.0 AJAX Extensions中,它用来处

ASP.NET AJAX入门系列(1):概述

经常关注我的Blog的朋友可能注意到了,在我Blog的左边系列文章中,已经移除了对Atlas学习手记系列文章的推荐,因为随着ASP.NET AJAX 1.0 Beta版的发布,它们已经不再适用,为了不继续误导广大朋友,所以不再作为推荐系列文章,如果有需要参考的朋友,可以直接到随笔分类中查看. ASP.NET AJAX Beta改动如此之大,鉴于又没有很好的中文参考资料,所以决定最近开始写作ASP.NET AJAX入门系列,这个系列我会把ASP.NET AJAX当作一个全新的东西去对待,不再考虑以