使用jQuery处理Ajax

HTTP协议

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议

设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法

注意：

所有的WWW文件都必须遵守这个标准

一次HTTP操作称为一个事务，其工作过程可分为四步  

HTTP协议-请求方法

最常见的增删改查所需要的请求方法有:

查询使用GET请求;

删除使用DELETE请求;

修改使用PUT请求;

增加使用POST请求;

注意:使用什么请求,取决于后端.

回顾原生创建Ajax的方法，思考如何使用jQuery处理Ajax？

使用jQuery处理Ajax,有三种方法:

1.$.ajax() 方法

2.$.get() 方法

3.$.post() 方法

$.ajax() 方法

通过 HTTP 请求加载远程数据

jQuery.ajax([settings])

Settings：可选。用于配置 Ajax 请求的键值对集合

示例：

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

  htmlobj=$.ajax({url:"/jquery/test1.txt"});

  $("#myDiv").html(htmlobj.responseText);

  });

$.ajax() 方法-参数

success()参数的调用函数,配合json使用

 <script>

        $.ajax({

            // $.ajax方法是默认是get请求

            // 可以通过method修改请求方式

            // method: "post",

            // async默认是true为异步(有等待时间,可以先做其他事件),false表示同步(先执行在等待过程)

            // async: true,

            // cache表示是否换成页面的数据,默认为true,改为false表示不缓存此页面,datatype为script或isonp,是默认false的

            // cache: true,

            // data表示发送服务端的数据

            // data: {

            //     username: "zhangsan",

            //     password: "123456"

            // },

            // 预期服务器返回的数据类型,例如:script,jsonp,json

            // 如果服务器返回的数据类型是字符串类型,使用dataType:"json"可以自动帮你转成json类型

            dataType: "json",

            // ulr是接口

            ulr: "./1.json",

            // 请求成功后,可以通过形参获取后台传输的数据

            success: function (s) {

                console.log(json.parse(s));

            },

            // 请求失败时,调用次函数

            error: function (err) {

                // 形式参数err会返回请求失败的信息对象

                console.log("数据请求失败", err);

            },

            // 在jsonp请求中重写回调函数的名字

            jsonp: "fn",

            // 给jsonp请求指定一个回调函数名

            jsonCallback: "Callbackfn"

        })

    </script>

练习题1:做出如图表格效果,使用ajax引用json文件内容

第二种方法:

<script>

        $.ajax({

            url: "./1.txt",

            dataType: "json",

            success: function (res) {

                console.log(res);

                for (var i = 0; i < res.length; i++) {

                    $("#stulist").append(

                        "<tr id='apptr" + i + "'><tr>"

                    );

                    console.log(i);

                    var lists = res[i]

                    console.log(lists);

                    var str = JSON.stringify(lists)

                    console.log(str);

                    $.each(JSON.parse(str), function (index, domele) {

                        console.log(index);

                        $("#apptr" + i).append(

                            "<td>" + domele + "</td>"

                        );

                    });

                }

            }

        })

$.get() 方法

通过 HTTP GET 请求从服务器上请求数据

$.get(URL,callback);

URL：必需参数，路径

Callback：可选参数，请求成功后所执行的函数名

 

$.post() 方法

通过 HTTP POST 请求从服务器上请求数据

$.post(URL,data,callback);

URL：必需参数，路径

Data：可选参数，连同请求发送的数据

Callback：可选参数，请求成功后所执行的函数名

 

什么是跨域

跨域，指的是浏览器不能执行其他网站的脚本

例子：比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口

产生跨域的原因

由浏览器的同源策略造成的

同源策略：同域名，同端口，同协议

同域名，同端口，同协议

浏览器的控制台出现了这个错误就是产生了跨域问题,如下图的错误

<script>

        $.ajax({

            url:"http://192.168.10.58:3000",

            success:function(res){

                console.log(res);

            }

        })

    </script>

跨域解决方案1

CORS跨域资源共享

服务端：header("Access-Control-Allow-Origin:*");

“*”表示所有的域都可以接受

缺点

ie10以下不支持

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

$.ajax({

url:" http://localhost:3000",

type:"get",

success:function(info){

console.log(info);

},

error:function(err){

console.log(err);

}

});

})

 服务端：

let http = require('http')

http.createServer((req,res)=>{

    res.setHeader('Access-Control-Allow-Origin','*')

    res.end('success')

}).listen(3000,function(){

    console.log('serve start...')

})

跨域解决方案2

jsonp

动态创建script标签，使用jQuery的jsonp请求

优点

兼容性强&不受同源策略的限制

缺点

只能用get方法，不能使用post方法

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

$.ajax({

// localhost要换成ip

url:" http://localhost/test.php",

type:"get",

//定义发送jsonp请求

dataType:'jsonp',

//更改定义的参数名

jsonp:'kyFn',//修改callback名称，但是php中也要修改成相对应的函数名

//指定jsonp发送的回调函数名(可以任意起名字，无需对应)

jsonpCallback:'hyly',

success:function(info){

console.log(info);

}

});

})

function hyly（res）{console.log(res) }

服务端：

<?php

header("Content-type: text/html;charset=utf-8");

$callback=$_GET['kyFn'];

echo $callback.'("哈哈哈")';

?>