jquery的ajax

原生js的ajax

//1.创建
var xhr = new XMLHttpRequest()

//2.建立连接
xhr.open("get","url",true)

//3.发送请求
xhr.send();

//4.监听结果
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){ //服务器已经处理好了，并且将结果返回
        if(xhr.status == 200){ //请求成功
            console.log(xhr.responseText);
        }
    }
}


ajax获取到的数据都是字符串
eval() : 接收一个字符串，并且执行里面的代码
JSON.pase(): 将字符串转换为JSON数据

jquery的ajax

ajax:async javascript and xml 异步的JavaScript和XML

作用：和后台进行少量的数据交互，实现异步更新

异步：浏览器和服务器请求数据的过程中，可以去做其他的事情，数据请求成功通过回调函数处理

同步：浏览器和服务器请求数据的过程中，浏览器只能等待 alert for

• $.ajax()

$.ajax({
    "url":"请求地址",
    "type":"请求方式 get post  默认是get",
    "data":"请求参数，{usr:'txf',pwd:123}",
    "timeOut":"请求超时时间 ms",
    "cache":"是否缓存  get有缓存",
    "dataType":"预期服务器返回的数据类型，txt,xml,script,js,json,jsonp",
    "success":function(res){},
    "error":function(err){},
    "complete":function(res){},
})

• get与post

  • 使用

     //$.get("url","data","success")
    $.get("http://edu.xqb.ink/api/banner",function(res){
        console.log(res);
    });
    
    //$.post("url","data","success")
    $.post(" http://edu.xqb.ink/api/loginact",{"usr":"txf116","pwd":"1234567"},function(res){
        console.log(res);
    })
    

  • 区别

    • get
      • 一般用于请求数据
      • 安全性较低：请求参数会直接拼接在url中
      • 可以缓存
      • get有容量限制，2kb
    • post
      • 可以用于提交和请求数据
      • 安全性较高：请求参数在http中
      • 不能缓存
      • post，基本上没有限制