js原生ajax与jquery的ajax的用法区别

什么是ajax和原理?

AJAX 是一种用于创建快速动态网页的技术。
通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据

XMLHttpRequest对象的基本属性：

onreadtstatechange 每次状态改变所触发事件的时间处理程序。
responseText 从服务器响应返回以字符串为形式的数据
responseXML 从服务器响应返回以XML（DOM兼容文档）数据对象
status 从服务器返回的数字代码
- 100-199 用于指定客户端应相应的某些动作。
- 200-299 用于表示请求成功。
- 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
- 400-499 用于指出客户端的错误。
- 500-599 用于支持服务器错误。
- 常用 200（正常）404（找不到） 500（服务器错误）
- 详细看链接
status Text (如： if status==200 =>OK ) 伴随状态码的字符串信息
readyState 对象状态值
- 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
- 1 (初始化) 对象已建立，尚未调用send方法
- 2 (发送数据) send方法已调用，但是当前的状态及http头未知
- 3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
- 4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

实例

<div id="content"></div>
<button id="btn"></button>
<script>var btn=document.getElementById('btn');btn.onclick=function(){var http=null;
if(window.ActiveXObject){http=new ActiveXObject('Microsoft.XmlHTTP');
}else{http=new XmlHttpRequest();
}
var url="http://XXXX";  //指定url
http.open('GET',url,true);
//第一个参数选择哪种方式提交数据
//第二个参数是选择传递的地址
//第三个参数是选择是否异步传输，true:异步，false:同步//当状态发生改变就触发的事件（可以理解为node.onchange=function()）
http.readystatechange=function(){if(http.status==4&&http.status==200){//返回的对象状态值为:4//返回的状态码为200        document.getElementById('content').innerHTML=http.responseText;//返回值赋值到DOM}//简单的异常处理if(http.status==404){alert('响应失败');}
}
发送一个 HTTP 请求
http.send();
}
</script>

接下来是介绍jQuery的ajax提交

因为是为了对比与原生的区别，毕竟jQuery 的ajax更强大了，因为提供了更多内容的封装
- 首先，jQuery的常用方式有

$.ajax，$.post， $.get， $.getJSON。

先来个实例压压惊

$.ajax({//请求类型，get,posttype:'GET',// 请求的数据类型，可以是html,json,xml等dataType:'json'，//传输的数据data:{num1:num1,num2:num2},//选择是否支持异步刷新，默认为trueasync:true,success:function(){console.log('very good 请求成功');},error:function(){console.log('对不起，请求失败');}
})

如果你是用.get或者. get或者 . post那更简单了，直接把type去掉也可以了
是不是很简单？相比传统的用法，看起来更简洁，更容易理解，相当于往对象里面放值就可以自动化使用了

其实核心都是XMLHttpRequest对象的调用，和其对象属性的掌握。
更多请参照文档

js原生ajax与jquery的ajax的用法区别相关推荐

JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式掌握json数据格式方式掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...
原生AJAX以及JQuery发送AJAX请求的几种方式
JSON&AJAX 文章目录 JSON&AJAX 1. JSON 1.1 json概述 1.2 Json使用 3. 原生AJAX 4. JQuery的AJAX 4.1 GET请求方式 ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
Js - Dom原生对象和jQuery对象的联系、区别、相互转换
Dom原生对象和jQuery对象的联系.区别.相互转换: 联系: 1.jQuery对象:通过jQuery包装DOM对象后产生的对象: 2.两者之间可以相互转换: 区别: 1.jquery选择器得到的j ...
js文件、图片上传（原生方法和jquery的ajax两种都有）
<!DOCTYPE html> <html> <head> <title>test</title> </head> <bo ...
原生ajax和Jquery的ajax
目录原生ajax 传统请求(同步方式)的问题 Ajax优势和作用 Ajax请求与传统请求的区别: ajax原理(方法,属性 ) XMLHttpRequest open send 属性 readySt ...
WEB22_Js原生Ajax和Jquery的Ajax
一.Ajax概述 1．什么是同步,什么是异步同步现象: 客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态异步现象: 客户端发送请求到服务器端,无论服务器是否返回响应,客户端 ...
利用jquery操作ajax,利用jquery对ajax操作，详解原理（附代码）
1.jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector ...
eazyui ajax传值,jquery easyui ajax data属性传值方式
$.ajax({ url:url, type:'post', data:data, dataType:'json', contentType: "application/x-www-form ...

js原生ajax与jquery的ajax的用法区别

什么是ajax和原理?

XMLHttpRequest对象的基本属性：

实例

接下来是介绍jQuery的ajax提交

js原生ajax与jquery的ajax的用法区别相关推荐

最新文章

热门文章