基于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. 从spring源码汲取营养：模仿spring事件发布机制，解耦业务代码

    前言 最近在项目中做了一项优化,对业务代码进行解耦.我们部门做的是警用系统,通俗的说,可理解为110报警.一条警情,会先后经过接警员.处警调度员.一线警员,警情是需要记录每一步的日志,是要可追溯的,比 ...

  2. 感觉async await 异步编程 并不能提升性能?

    我有2个方法 代码相同 都是执行上传文件IO操作 一个同步 一个异步 接着我用POSTMAN 分别用200个线程 去同时测试2个接口 结果很意外 2个接口 同时执行完成的速度 异步更慢 之前经常看别人 ...

  3. SpringCloud Alibaba微服务实战三 - 服务调用

    导读:通过前面两篇文章我们准备好了微服务的基础环境并让accout-service 和 product-service对外提供了增删改查的能力,本篇我们的内容是让order-service作为消费者远 ...

  4. JDK官方下载

    平时进行java开发时避免不了使用jdk,而现在jdk版本已经到1.9了,但是之前版本下载在官方网站就不好找了(主要还是因为网站是英文的): 进入官网下载jdk的前提是进入官网,直接百度搜jdk下载也 ...

  5. 【原创】003 | 搭上基于SpringBoot事务思想实战专车

    前言 如果这是你第二次看到师长,说明你在觊觎我的美色! 点赞+关注再看,养成习惯 没别的意思,就是需要你的窥屏^_^ 专车介绍 该趟专车是开往基于Spring Boot事务思想实战的专车,在上一篇 搭 ...

  6. 如何在Android手机上进行自动化测试（上）

    版权声明:允许转载,但转载必须保留原链接:请勿用作商业或者非法用途 前言 通过阅读本节教程,你将了解到以下内容: 如何在脚本代码中.运行脚本时指定手机 如何填写--device Android:/// ...

  7. react-native 信鸽推送集成

    目录 一. git链接: react-native-xinge-push 1.1 安装 1.2. link 二. android配置 2.1. android/settings.gradle 2.2. ...

  8. git 使用详解（5）—— get log 查看提交历史

    git log 查看 提交历史 在提交了若干更新之后,又或者克隆了某个项目,想回顾下提交历史,可以使用 git log 命令查看. 接下来的例子会用我专门用于演示的 simplegit 项目,运行下面 ...

  9. 使用 RMI 实现方法的远程调用

    RMI 介绍 RMI 指的是远程方法调用 (Remote Method Invocation).它是一种机制,能够让在某个 Java虚拟机上的对象调用另一个 Java 虚拟机中的对象上的方法.可以用此 ...

  10. [TimLinux] Python 模块

    1. 概念 模块是最高级别的程序组织单元,它将程序文件和数据封装起来以便重用.实际上,模块往往对应Python文件,每一个文件都是一个模块,并且模块导入其他模块之后就可以使用导入模块定义的变量,模块和 ...