jQuery封装Ajax

今天五一，哈哈，正好分享点有质量的东西，分享的是jQuery与后端进行数据交互的三种方式和跨域访问，欢迎有需要的朋友参看指导

什么是jQuery

 jQuery是 一个前端的方法库
    	就是别人将JavaScript程序,定义成了各种函数方法,我们直接写直接用,就可以实现各种功能

  学习中遇到不懂的可以参考的jQuery的网站
    	 官网 : https://jquery.com/
    	 中文网站 : http://jquery.cuishifeng.cn/

  jQuery的三大优点
         1,强大的选择器机制 --- 方便获取标签对象
         2,优质的隐式迭代 --- 默认对数组中的所有标签,进行操作
         3,无所不能的链式编程 --- 再复杂的操作,一行代码搞定 
         	（关于事件委托，事件少用jQuery一行代码简单，一旦多了还是js简单，容易理解）

   如何使用jquery，分两步
         1,通过外部程序,加载jQuery文件，引入jQuery中的js文件
           可以是本地文件,也可以是网上的文件
         2,通过 $ 或者 jQuery 的形式 来调用执行jQuery中定义的方法
         
   可以通过下面两种方法打印出jQuery的方法进行查看
         console.dir($);
         console.dir(jQuery);

jQuery操作get

效果跟代码如下

jQuery操作post

效果跟上面一样，代码如下

post方法跟get方法差不多，就是提交的方式不一样罢了，php文件中的获取方式要跟请求方式一样才能获取到前端传入的数据

jQuery操作Ajax

效果跟上面一样，代码如下

Ajax的请求方法跟上面两种没啥大的区别，唯一的区别是我们需要设定请求方式，多了一个type用来设置提交方式，不写默认是get方式提交

三种请求方式总结

在 jQuery中 给我们封装了 ajax请求
不用考虑 兼容,跨域等问题, jQuery全都给我们解决了
只需要在设定请求时,设定不同的参数,就可以完成不同的请求

    jQuery中 封装的 ajax请求 有3种
    
    1, $.get()   get请求方式
        参数有4个参数,必填参数是 url地址 其他参数都是选填参数,可以没有
        参数的形式是对象形式
        $.get({
            url : 地址(必填)
            data : 携带的参数 对象形式
            dataType : 期望的数据类型,如果为json,会将后端返回的json串,自动解析
            success : function(){} 请求成功时执行的函数
        })


    2, $.post()  post请求方式
        参数有4个参数,必填参数是 url地址 其他参数都是选填参数,可以没有
        参数的形式是对象形式
        $.post({
            url : 地址(必填)
            data : 携带的参数 对象形式
            dataType : 期望的数据类型,如果为json,会将后端返回的json串,自动解析
            success : function(){} 请求成功时执行的函数
        })

    3, $.ajax()  综合方式
        参数比较多，这里先介绍几个
        常规get,post请求(不是跨域),常用参数
        
        $.ajax({
            常用:
            url : 地址;
            type / method : 请求方式 默认值是get方式
            data : { } 传参参数,必须是对象形式
            dataType : json,  设定为json,会自动解析反应提中的json串
            success : function(){}  请求成功执行的函数

            不常用:
            async : 设定是否异步,默认值是true,异步执行ajax请求
            error : function(){}  请求错误时执行的函数
                    请求成功时不会执行
            timeout : 设定时间,单位 毫秒
                      如果请求时间超过设定的时间,认为是请求失败
                      必须是异步执行
            cache : 设定是否缓存请求结果
                    默认值是 true,缓存请求结果
                    必须是get方式,这个设定才起作用
                    post方式不会缓存,设定也没有效果
            context : 指定 执行函数中 this的指向
        })

jQuery的跨域访问

代理服务器跨域访问

代码如下

这一种方式就是利用代理服务器进行跨域访问获取响应数据，jQuery封装的代理服务器跨域方法比较简单，有需要可以参看下之前写的js操作Ajax跨域案例代理服务器跨域案例

jsonp方法跨域访问

注意：此种方式尽量使用get方式发送请求，用post会出错，访问不成功，此种方式安全性不好，因为只要知道路径就可以获取到数据，所以不常用

跨域访问方式总结

使用 jQuery 封装的 ajax 请求 完成跨域

    1, 代理方式
        必须是高版本的jQuery
        设定好 服务器代理
        定义好请求方式
        get方式参数设定在url地址中
        post方式参数设定在 data中

    2, jsonp方式
    	通过script标签的src属性,访问一个PHP外部跨域程序

        步骤:
            先定义一个函数
            在PHP中 输出字符串,字符串内容是调用函数,并且定义参数  echo  '函数名称(数据参数)'
            在js当中,就等于是 执行这个函数

        jQuery封装的ajax操作jsonp
            url : 地址是一个跨域地址
            dataType : 必须是 jsonp
            jsonp : 设定函数名称,默认是callback

        php中: 
            echo 的内容是字符串拼接形式
            echo "$函数名称变量(" . json_encode($返回数据) . ")";
            函数名称 存储在变量中,使用 " " 双引号解析
            返回的数据,必须是 json串格式 , 使用 json_encode() 转化,拼接在 函数的参数位置中