ajax核心对象:  XMLHttpRequest

那年创建的XMLHttpRequest对象

function getXhr(){

　　// 声明对象

　　var xhr=null;

　　//根据浏览器不同创建

　　if(window.XMLHttpRequest){

　　　　// 除 ie外的其他浏览器

　　}else{

　　　　// ie浏览器

　　　　xhr=new ActiveXObject（‘Microsoft.XMLHttp’）;

　　}

　　return xhr;

}

ajax 几种常用方法：

  1. load();
  2. $.get();
  3. $.post();
  4. $.getScript();
  5. $.getJSON();
  6. $.ajax;

 /*** load***/

$('div').load('url', data, callback );

url 需要请求的地址
data 请求数据，格式一般为key-value形式
 callback  回调函数(只能接收字符串类型（HTML格式）)

没有请求数据时，请求类型为GET，

发送请求数据时，请求类型是POST，load方法的请求类型由是否请求数据决定。

<html>

    <head>

    <title></title>

    </head>

    <body>

        <!--注意：谁调用load就把返回的数据写到那个元素里，这里是写入div里-->

        <div>xxoo</div>

        <script>

        　　　　user={'name':'xx','age':'123'};
　　　　　　　　$('div').load('url',user,function(data){

                // 形式参数data就是服务器端响应的数据

        });

        </script>

    </body>

</html>

 /***$.get()***/

$.get(url ,data, callback, type);

url 请求的地址
data 请求数据，格式一般为key-value形式
callback       回调函数(可接收多个类型格式的数据)
type 返回内容格式，设置服务器端响应数据格式（xml,html,script,json,text等）默认为HTML格式     

无论是否发送请求数据，请求类型都是GET。

<html>

    <head>

    <title></title>

    </head>

    <body>

        <div>xxoo</div>

        <script>

               $('div').click(function(){

        　　　  user={'name':'xx','age':'123'};

　　　　　　     $.get('url',user,function(data){

                      // 形式参数data就是服务器端响应的数据

                },'json');

        });

        </script>

    </body>

</html>

/***$.post()***/

$.post(url ,data, callback, type);

所有参数和使用方式和get一毛一样，只是请求数据方式是POST方式。

 /***$.getScript()***/

$.getScript('url', callback);  动态读取脚本（JavaScript代码脚本）

url: 读取脚本的地址，callback：读取成功后的回调函数

<html>

    <head>

    <title></title>

    </head>

    <body>

    <input id='btn' type='button' value='getScript'/>

    <script>

        $('#btn').click(function(){

            $.getScript('xx.js');   // 页面中，点击按钮时才读取，并不是页面加载的时候就读取

            $.getScript('服务器url/xx.js'，function(data){

               // 回调函数，data为服务器返回的数据
　　　　　　 });

        });

        </script>

    </body>

</html>

 /***$.getJSON()***/

由于万维网协议默认不允许跨域请求，所以有了跨域请求

跨域：

　　完全跨域： --IP不同

　　跨子域： --IP相同，但端口不同

$.getJSON(url,data,callback);通过GET 方式请求数据

注意url处的写法：'url?callback=?'

<html>

    <head>

    <title></title>

    </head>

    <body>

    <input id='btn' type='button' value='getJSON'/>

    <script>

        $('#btn').click(function(){

            $.getJSON('url?callback=?',function(data){// 回调函数，data为服务器返回的数据

                consoles.log(data);

        });

    });

    </script>

    </body>

</html>

别人家的跨域逻辑图：

/***$.ajax()***/

$.ajax(options);基础方法：

url 请求地址
type 请求类型，默认为GET
async 是否异步，默认为true
data 发送的请求数据，key-value 形式
dataType 设置响应数据格式　：HTML，xml,json
success 请求成功
error 请求失败

请求成功时(success)，回调函数function(data , textStatus) { }

  • data: 服务器相应的数据内容
  • textStatus : AJAX请求状态，success(成功)

请求失败时(error)，回调函数function(XMLHttpRequest，textStatus，errorThrown ){ }

  • XMLHttpRequest : AJAX 核心对象
  • textStatus : AJAX请求状态，error(失败)，timeout(超时)，notmodified(没有被修改)
  • errorRhrown : 错误异常信息
<html>

<head>

    <title><title>

</head>

<body>

    <input id='n1' name ='pp'/>

    <input type = 'button' value = '提交' onclick='SubmitData();'/>

    <script src = 'jquery-3.3.1.js'></script>

    <script>

    function SubmitData(){

        // 获取值

        var inpVal = $('#n1').val;   // 获取用户输入的value值

        var inpName = $('#n1').attr('name');  // 获取到pp

        // 发送一个ajax请求

        $.ajax({

            url:'http://127.0.0.1:80000/index/'

            data:{'kk':123,inpName:inpVal},     // 默认提交的数据

            type:'POST',

            success:function(arg){

                // 当请求执行完成之后，自动调用

                console.log(arg);    // 接收到的数据

            },

            error:function(){

                // 当请求错误之后，自动调用

            }

        });

    }

    </script>

</body>

</html>

不夸域的小栗子

jsonp（json with padding） : 用于解决主流浏览器的跨域数据访问的问题

<html>

<head>

    <title></title>

</head>

<body>

<input type = 'button' value = '获取节目' onclick='SubmitData();'/>

    <div id='container'></div>

    <script src = 'jquery-3.3.1.js'></script>

    <script>

    function SubmitData(){

        $.ajax({

            url:'xxxx',

            data:{},

            type:'GET',

            dataType:'jsonp',

            jsonp:'callback',    // 以jsonp的形式返回并封装到list函数里

            jsonpcallback:'list',   // callback不能变，list可以变

            success:function(arg){

                //arg相当于字典

                var jsonpArray = arg.data;   // 获取到数组

                $.each(jsonpArray,function(k,v){

                    // k，下标 v,数组值

                    var week = v.week;

                    var temp = '<h1>'+week+'</h1>';

                    $('#container').append(temp);

                    var listArray = v.list;

                    $.each(listArray,function(kk,vv){

                        var link = vv.link;

                        var name = vv.name;

                        // <a href = 'link'>name</a>

                        var tempNew = "<a href='"  +link +"'>" +name + "</a><br/>";

                        $('#container').append(tempNew);

                    });

                });

            }

        });

    </script>

</body>

</html>

跨域的丑栗子

现除了jsonp解决跨域问题外还有CORS..

html_jQuery_ajax的更多相关文章

随机推荐

  1. PLSQL Developer安装与配置

    前言 PLSQL Developer软件以及需要的配置 链接:https://pan.baidu.com/s/1xHdAl1RAgtQb-oDHPah19w 密码:x41k 1 安装 解压这两个压缩包 ...

  2. Angular+Ionic+RSA实现后端加密前端解密功能

    因业务需要,需要给android应用安装证书,通过读取证书文件内容实现某些功能的控制: 流程:后台通过publicKey对指定内容的文件进行加密,生成文件共客户下载,客户下载后选择该证书文件读取到应用 ...

  3. python--协程之特别篇

    Python通过yield提供了对协程的基本支持,但是不完全.而第三方的gevent为Python提供了比较完善的协程支持. gevent是第三方库,通过greenlet实现协程,其基本思想是: 当一 ...

  4. CentOS6和CentOS7

    http://mirrors.aliyun.com/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1708.iso net.ifnames= biosdevname ...

  5. django --视图装饰器

  6. input下拉带输入框

    html5 自带的datalist实现 html代码: <input list="students"> <datalist id="students&q ...

  7. Django commands自定制

    什么是Django Commands Django 对于命令的添加有一套规范,你可以为每个app 指定命令.通俗一点讲,比如在使用manage.py文件执行命令的时候,可以自定制自己的命令,来实现命令 ...

  8. CMDB项目开发

    CMDB介绍 CMDB --Configuration Management Database 配置管理数据库, CMDB存储与管理企业IT架构中设备的各种配置信息,它与所有服务支持和服务交付流程都紧 ...

  9. 机器学习-kmeans的使用

    import numpy as np import pandas as pd import matplotlib from matplotlib import pyplot as plt %matpl ...

  10. PyCharm的使用教程

    1.1 安装 首先去下载最新的pycharm ,进行安装.可以直接在官网下载. 1.2 首次使用 1,点击Create New Project. 2, 输入项目名.路径.选择python解释器.如果没 ...