基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现
1.基于JS的ajax的实现
    step1: var xmlhttp = XMLHttprequest() #实例化一个对象
    step2: xmlhttp.open("") #url地址
    step3: xmlhttp.send("name=alex") #请求体的内容 if GET请求 ：send(null)
    step4: 监听：xmlhttp(if ==4:{var context=xmlHttp.responsetext})
 GET:ajax具体实现（JS方式）：
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button onclick="func1()">ajax提交</button>
    </body>
    <script>
        function func1(){
            //step1
            var xmlhttp=createXMLHttpRequest();
            //step4：推荐放到这个位置
            xmlhttp.onreadystatechange=function() {//监听
                {#alert(xmlhttp.status);//返回状态码#}
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    {#alert(xmlhttp.readyState);//查看状态过程#}
                    var data=xmlhttp.responseText;
                    alert(data);
                };
            }
            //step2
            xmlhttp.open("GET","/ajax/",true);//打开服务器连接
            //step3
            xmlhttp.send(null);//发送请求
        };
        {#处理浏览器兼容问题#}
        function createXMLHttpRequest(){
            var xmlHttp;
            //适用于大多数浏览器，以及IE7和更高版本
            try{
                xmlHttp = new XMLHttpRequest();
            } catch (e){
                //适用于IE6
                try{
                    xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
                } catch (e){
                    //适用于IE5.5，以及更早版本
                    try{
                       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e){}
                }
            }
            return xmlHttp;
        }

    </script>
    </html>
 POST:请求注意事项
    POST请求必须设置ContentType请求头的值为：application/x-www-form-urlencoded。
    表单的enctype默认值就是为application/x-www-form-urlencoded，因为默认值就是这个，
    当设置了<form>的enctype="application/x-www-form-urlencoded"时，等同于设置了Con
    tent-Type请求头。但在ajax发送请求时，就没有默认值了，这需要自行设置请求头：
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
 实例：
    <!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)">
            <span id="error"></span>
        </p>
        <p>密码：<input type="password" name="pwd"></p>
        <input type="submit" value="submit">
    </form>
    </body>
    <script>
        function func1(self){
            var username=self.value;
            var xmlhttp=createXMLHttpRequest();
            xmlhttp.open("POST","/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=="1"){
                        document.getElementById("error").innerHTML="用户名已经注册过了";
                    }
                };
            }
        }
        {#处理浏览器兼容问题#}
        function createXMLHttpRequest(){
            var xmlHttp;
            //适用于大多数浏览器，以及IE7和更高版本
            try{
                xmlHttp = new XMLHttpRequest();
            } catch (e){
                //适用于IE6
                try{
                    xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
                } catch (e){
                    //适用于IE5.5，以及更早版本
                    try{
                       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e){}
                }
            }
            return xmlHttp;
        }
    </script>
    </html>
2.JSON和JSONP
    JSON与XML比较：
        可读性：XML好；
        解码难度：JSON本身就是Js对象（主场作战），所以简单很多；
        流行度：xml已经流行很多年，但在AJAX领域json更受欢迎；
    js接受python的json对象：
    在json的编码过程中，会存在从python原始类型向json类型的转换过程，具体的转换如下：
        python          json对象
        dict            object
        list，tuple     array
        str,unicode     string
        int,long,float  number
        True            true
        False           false
        None            null
        JSON.parse()
        .parse()方法：parse用于从一个字符串中解析出json对象
        JSON.stringify()
        .stringify()方法：stringify用于从一个对象解析出字符串
            示例：
            $.post("/jquery/",function(data){
                console.log(data);
                console.log(typeof data);
                data=JSON.parse(data);#parse用于从一个字符串中解析出json对象
                console.log(typeof data);
                console.log(data["name"]);
            });
        json示例：//注：字符串必须双引号，否则不是json
            #author：wylkjj
            #date：2019/9/6
            import json
            f=open('text','r')
            data=f.read()
            data=json.loads(data)
            f.close()
            print(data["name"])

            import json
            dic={'name':'eric'}
            data=json.loads(data)
            print(data["name"])
3.基于JQuery的ajax的实现:(最底层方法：$.ajax())
    $.ajax(
        url:
        type:"POST"
    )
    $.get()
    $.post()
    $.getJson():相当于$.get(     type:Json)
    $.getScript():实时加载，现用现取，不用不加载
    两种书写方式：
    （1）.$.ajax({
        url:"/  /",
        type:"POST"
    })
    （2）.$.ajax("",{})
        请求数据：data,processDate,contentType,traditional,dataType,sucess
            data:当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式（urlencoded?a=1&b=2）
                发送给服务端；此外，ajax默认以get方式发送求。
            processDate:声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，那么对data：{a:1,b:2}会调用
                json对象的toString()方法，即{a:1,b:2}.toString(),最后得到一个[object，Object]形式的结果。该属性的意义在于当
                data是一个dom结构或者xml数据时，我们希望数据不进行处理，直接发过去，就可以将其设置为true。
            contentType:
                默认值："application/x-www-form-urlencoded"，发送信息至服务器时内容编码类型。
                用来指明当前请求的数据编码格式：urlencoded:?a:1&b:2;如果想以其他方式提交数据，比如contentType:
                "application/json",即向服务器发送一个json字符串：
            dataType:
                当dataType已经声明为“json”时，就是告诉服务器“要回就给给我回json格式的，不然老子不要！”，
                而且接受到数据后将自动转换成JavaScript对象。dataType的可用值：html xml json text script
            success:
                success参数：success:function(){} 当成功执行时执行的函数
            complete：
                complete参数：complete:function(){} 当执行不成功的时候执行的函数
                complete会打印所有错误信息
            beforeSend(XHR):
                类型：Function发送请求前可修改XMLHttpRequest 对象的函，如添加自定义HTTP头。XMLHttpRequerst
                对象是唯一的参数。这是一个Ajax事件。如果返回false可以取消本次ajax请求。
            error:
                error:function(data){
                    alert(data)
                }
                内部错误，指服务器的内部错误
 实例：
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button onclick="func1()">AJAX提交</button>
    <script src="/static/jquery-3.1.1.min.js"></script>
    <script>
        function func1() {
            Text()
        }
        function Text(){
        //回调函数
            //$.post();
            //$.get("/jquery/",{name:"eric"});
            //$.post("/jquery/",{name:"eric"});
            $.post("/jquery_get/",{name:"eric"},function(data,stateText,obj){
                //console.log(arguments);//打印参数对象中的所有参数
                console.log(data);
                console.log(stateText);
                console.log(obj);
                alert(data);
            });
        }
    </script>
    </body>
    </html>
 $.ajax() 实例：
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <button onclick="func1()">AJAX提交</button>
    <script src="/static/jquery-3.1.1.min.js"></script>
    <script>
        function func1() {
            Text()
        }
        function Text(){
            //$.post();
            //$.get("/jquery/",{name:"eric"});
            //$.post("/jquery/",{name:"eric"});
            $.post("/jquery_get/",{name:"eric"},function(data,stateText,obj){
                //console.log(arguments);//打印参数对象中的所有参数
                console.log(data);
                console.log(stateText);
                console.log(obj);
                alert(data);
            });
            $.ajax({
                url:"/jquery_get/",
                type:"POST",
                //data:{a:1,b:2},
                data:{a:1,b:[3,4]},//迭代循环，深层循环
                traditional:true  //禁止程序执行默认的迭代循环，深层循环
                //processData:false,
                //contextType:text,
            });
        }
    </script>
    </body>
    </html>
4.注：浏览器兼容版本问题
    {#处理浏览器兼容问题#}
    function createXMLHttpRequest(){
        var xmlHttp
        //适用于大多数浏览器，以及IE7和更高版本
        try{
            xmlHttp = new XMLHttpRequest();
        } catch (e){
            //适用于IE6
            try{
                xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
            } catch (e){
                //适用于IE5.5，以及更早版本
                try{
                   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
                } catch (e){}
            }
        }
        return xmlHttp;
    }
5.jQuery的data属性写法有很多.一种是json格式,类似{key:"value",key2:"value2"}.
另一种: data: xmlDocument(必须设置:processData: false,防止自动转换),还有一种:data: "name=John&location=Boston"

基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现的更多相关文章

  1. ajax 请求 对json传的处理 Jquery 使用Ajax获取后台返回的Json数据后,页面处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别

    为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...

  3. ajax中的json和jsonp详解

    出现的问题: 花了点时间研究ajax中的json和jsonp的原理,这里记录一下.以前一直在使用ajax调用数据,但是从来没有遇到跨域问题,也从来没有注意过json和jsonp的区别,总是一通乱用.但 ...

  4. json和jsonp的区别，ajax和jsonp的区别

    json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...

  5. 使用JSONP，jQuery的ajax跨域获取json数据

    网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

  6. Ajax学习（二）：模仿jQuery的Ajax封装工具

    通过上一节的学习,基本了解Ajax的使用, 但是这样使用很麻烦,这里封装ajax为一个方法,作为一个ajax工具,传入相应参数就可以实现ajax的使用. 模仿jQuery的Ajax. 如下是jQuer ...

  7. json与jsonp应用及其他ajax数据交互方式

    1.json是数据交换格式,使用实例如下: $.getJSON( '/manage/asset/asset_delByIds.action', { 'ids':id }, function(data) ...

  8. 第6章 jQuery与Ajax的应用

    6.1 Ajax的优势和不足 6.1.1 Ajax的优势 1.不需要插件支持 2.优秀的用户体验 3.提高Web程序的性能 Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的 ...

  9. jQuery与Ajax的应用——《锋利的jQuery》（第2版）读书笔记3

    第6章 jQuery与Ajax的应用 jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$ ...

  10. jQuery 与 Ajax 的应用

    Ajax 全称为 "Asynchronous JavaScript and XML"(异步 JavaScript 和 XML ),它并不是指一种单一的技术,而是有机地利用了一系列交 ...

随机推荐

  1. 转载 C#中DataTable中的Compute方法使用收集

    原文: C#中DataTable中的Compute方法使用收集 Compute函数的参数就两个:Expression,和Filter. Expresstion是计算表达式,关于Expression的详 ...

  2. Django简介以及MVC模式

    一.简介 Django,是当前Python世界里最负盛名且成熟的网络框架.最初用来制作在线新闻的Web站点. Django是一个基于python的web重量级框架 重指的是为发开者考虑的多 采用了MV ...

  3. 在React项目中添加ESLint

    1. 安装eslint npm install eslint --save-dev // 或者 yarn add eslint --dev 2. 初始化配置文件 npx eslint --init / ...

  4. 【软件工具】easyExcel简明使用指南

    easyExcel简介 Java领域解析.生成Excel比较有名的框架有Apache poi.jxl等.但他们都存在一个严重的问题就是非常的耗内存.如果你的系统并发量不发的话可能还行,但是一旦并发上来 ...

  5. SimpleXML使用详解

    SimpleXML使用详解 介绍 SimpleXML提供了一种简单,直观的方法来处理XML.它只有一个单一类型的类,三个函数和六个方法. 使用SimpleXML SimpleXMLElement 类是 ...

  6. [学习笔记] [数据分析] 01.Python入门

    1.安装Python与环境配置 ① ② 安装pip以及利用pip安装Python库 2.Anaconda安装 conda list 要在root环境下 3.常用数据分析库 ① Numpy 安装:con ...

  7. 重写系统自带tabbar出现的 代理错误

  8. 【Python成长之路】词云图制作

    [写在前面] 以前看到过一些大神制作的词云图 ,觉得效果很有意思.如果有朋友不了解词云图的效果,可以看下面的几张图(图片都是网上找到的): 网上找了找相关的软件,有些软件制作 还要付费.结果前几天在大 ...

  9. centos使用yum存储快速安装MySQL

    RHEL/CentOS 7.x MySQL yum库 https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm RHEL ...

  10. 最新28道java基础面试题-上

    28道java基础面试题 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: 抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪 ...