不会吧,不会吧,不愧是Ajax,jQuery Ajax啊


Ajax and jQuery Ajax

我们做前端的,肯定不会只满足于写一些静态网页,我们希望做到网站(与服务器)的数据交互。不得不说,现在前端的发展真是太快了,不断的更新迭代,新的技术就如同雨后春笋,需要我们具备持续的学习能力才能更好的完成工作。
本文主要介绍原生Ajax和jQuery Ajax的使用。能够实现AJAX功能的还有两种现在比较流行的技术,Axios、Fetch。
好了,废话不多说,开始进入正题。

不会吧,不会吧,不愧是Ajax,jQuery Ajax啊

简单说一下这四者的区别吧:
Ajax:

全称Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。

jquery Ajax:

是 jQuery 底层 AJAX 实现。简单易用的高层实现,$.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。jQuery ajax – ajax() 方法

Axios:

axios不是原生JS的,需要进行安装,它不但可以在客户端使用,也可以在nodejs端使用。Axios也可以在请求和响应阶段进行拦截。同样也是基于Promise对象的。特性:从浏览器中创建 XMLHttpRequests、从 node.js 创建 http 请求、支持 Promise API、拦截请求和响应等。Axios 中文文档传送门

Fetch:

Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是service workers、Cache API、又或者是其他处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。Fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的Promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。

一、什么是Ajax

Ajax是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助。简单地说,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来。常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。Ajax的目的是提高用户体验,较少网络数据的传输量。同时,由于AJAX请求获取的是数据而不是HTML文档,因此它也节省了网络带宽,让互联网用户的网络冲浪体验变得更加顺畅。

二、Ajax原理是什么

不会吧,不会吧,不愧是Ajax,jQuery Ajax啊

三、原生Ajax怎么写

    创建一个ajax请求,依赖一个xhr对象

    var xhr;
    if (window.XMLHttpRequest) { // 兼容IE7+, Firefox, Chrome, Opera, Safari
    xhr = new XMLHttpRequest();
    } else { // 兼容 IE6, IE5
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    监听xhr对象的状态

       xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
    if (xhr.status == 200) {
    console.log(xhr.responseText);
    }
    }
    }

     汇总XHR的属性和方法及事件
    【属性】
    • xhr.response 响应主体内容
    • xhr.responseText 响应主体的内容是字符串(JSON或者XML格式字符串都可以)
    • xhr.responseXML 响应主体的内容是XML文档
    • xhr.status 返回的HTTP状态码
    • xhr.statusText 状态码的描述
    • xhr.timeout 设置请求超时的时间
    • xhr.withCredentials 在跨域请求中是否允许携带证书(携带COOKIE)
    【方法】
    • xhr.abort() 强制中断AJAX请求
    • xhr.getAllResponseHeaders() 获取所有响应头的信息
    • xhr.getResponseHeader([key]) 获取KEY对应的响应头信息
    例如:xhr.getResponseHeader( 'date') 就是在获取响应中的服务器时间
    • xhr.open() 打开URL请求
    • xhr.overrideMimeType() 重写MIME类型
    • xhr.send() 发送AJAX请求
    • xhr.setRequestHeader() 设置请求头

    建立连接
    GET请求实例:

    xhr.open('GET', 'tologon.php?username=' + input.value, true);
    xhr.send(null);

      xhr.open(method,url,async);

      method:请求的类型;GET 或 POST
      url:文件在服务器上的位置,如果是get请求,参数已?号开头下载地址后面
      async:true(异步)或 false(同步)

      xhr.send(string);

      post请求时才使用字符串参数,否则不用带参数。

    POST请求实例:

     xhr.open("POST", 'Topost.php', true);
    // 设置一个请求头,post请求在发送之前,得把post请求的参数格式指定一下
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    // 发送 post请求的参数写在send中 // key1=value1&key2=value2
    xhr.send("uname=" + uname.value);

四、jQuery Ajax怎么写

jQuery Ajax是对原生XHR的封装,除此以外还增添了对JSONP的支持。

注意:JQuery 1.9版本版本以下不支持大文件请求

post请求实例

 $.ajax({
type: "POST",
url: "jq.php",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
data: {
"username": $("input").val(),
"score": 100
},
success: function(data) {
console.log(data)
},
error: function(err) {
console.log(err)
}
})

type:请求方式 (“POST” 或 “GET”), 默认为 “GET”。
data:发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
success:请求成功后的回调函数。
error:请求失败时调用此函数。
链接: jQuery ajax - ajax() 方法.

五、什么是readyState?

readyState是XMLHttpRequest对象的一个属性,用来标识当前XMLHttpRequest对象处于什么状态。
readyState总共有5个状态值,分别为0~4,每个值代表了不同的含义

0:未初始化 – 尚未调用.open()方法;
1:启动 – 已经调用.open()方法,但尚未调用.send()方法;
2:发送 – 已经调用.send()方法,但尚未接收到响应;
3:接收 – 已经接收到部分响应数据;
4:完成 – 已经接收到全部响应数据,而且已经可以在客户端使用了;

六、什么是status?

不会吧,不会吧,不愧是Ajax,jQuery Ajax啊
不会吧,不会吧,不愧是Ajax,jQuery Ajax啊

如果有错误和语义不明确的地方,欢迎评论指出,你的点赞和收藏和关注是对作者原创的最好支持

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

不会吧,不会吧,不愧是Ajax,jQuery Ajax啊

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 不会吧,不会吧,不愧是Ajax,jQuery Ajax啊
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏