大家好，关于ajax 实例很多朋友都还不太明白，今天小编就来为大家分享关于json和ajax结合使用的知识，希望对各位有所帮助！
一、ajax请求有哪几种方式
1. get()方法通过远程 HTTP GET请求载入信息。
var ajax= new XMLHttpRequest();
ajax.open('get','01.Ajax_get.php');
ajax.onreadystatechange= function(){
if(ajax.readyState== 4&& ajax.status== 200){
// 5.使用返回的数据修改页面的内容
// responseText返回的就是一个字符串
//我们在ajax中如果是通过 ajax.responseText获取到的统统都是字符串
console.log(ajax.responseText);
2.post()通过远程 HTTP POST请求载入信息。这是一个简单的 POST请求功能以取代复杂的$.ajax().请求成功时可调用回调函数。
var ajax= new XMLHttpRequest();
ajax.open('post','ajax_post.php');
//如果使用post发送数据必须设置如下内容
//修改了发送给服务器的请求报文的内容
//如果需要像 HTML表单那样 POST数据，请使用 setRequestHeader()来添加 HTTP头。然后在 send()方法中规定您希望发送的数据：
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// post请求发送的数据写在 send方法中
//格式 name=jack&age=18字符串的格式
ajax.send('name=jack&age=998');
ajax.onreadystatechange= function(){
if(ajax.readyState==4&&ajax.status==200){
console.log(ajax.responseText);
二、ajax请求原理
AJAX全称(Async Javascript and XML)，即异步的JavaScript和XML
是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面
校长想找班主任汇报工作，就委托秘书去叫班主任自己就接着做其他事情，直到秘书告诉他班主任已经到了，最后班主任跟领导汇报工作
Ajax请求数据流程与“校长想找班主任汇报一下工作”类似，上述秘书就相当于XMLHttpRequest对象，校长相当于浏览器，响应数据相当于班主任
浏览器可以发送HTTP请求后，接着做其他事情，等收到XHR返回来的数据再进行操作
实现Ajax异步交互需要服务器逻辑进行配合，需要完成以下步骤：
建 Ajax的核心对象 XMLHttpRequest对象
通过 XMLHttpRequest对象的 open()方法与服务端建立连接
构建请求所需的数据内容，并通过XMLHttpRequest对象的 send()方法发送给服务器端
XMLHttpRequest对象提供的 onreadystatechange事件监听服务器端你的通信状态
接受并处理服务端向客户端响应的数据结果将处理结果更新到 HTML页面中
通过XMLHttpRequest()构造函数用于初始化一个 XMLHttpRequest实例对象
const xhr= new XMLHttpRequest();
通过 XMLHttpRequest对象的 open()方法与服务器建立连接
xhr.open(method, url, [async][, user][, password])
method：表示当前的请求方式，常见的有GET、POST
async：布尔值，表示是否异步执行操作，默认为true
user:可选的用户名用于认证用途；默认为null
password:可选的密码用于认证用途，默认为null
通过 XMLHttpRequest对象的 send()方法，将客户端页面的数据发送给服务端
body:在 XHR请求中要发送的数据体，如果不传递数据则为 null如果使用GET请求发送数据的时候，需要注意如下：
将请求数据添加到open()方法中的url地址中
发送请求数据中的send()方法中参数设置为null
onreadystatechange事件用于监听服务器端的通信状态，主要监听的属性为XMLHttpRequest.readyState,
关于XMLHttpRequest.readyState属性有五个状态，如下图显示：
只要readyState属性值一变化，就会触发一次readystatechange事件
XMLHttpRequest.responseText属性用于接收服务器端的响应结果
const request= new XMLHttpRequest()
request.onreadystatechange= function(e){
if(request.readyState=== 4){//整个请求过程完毕
if(request.status>= 200&& request.status<= 300){
console.log(request.responseText)//服务端返回的结果
}else if(request.status>=400){
console.log("错误信息："+ request.status)
request.open('POST','
通过上面对XMLHttpRequest对象的了解，下面来封装一个简单的ajax请求
const xhr= new XMLHttpRequest()
options.type=(options.type||'GET').toUpperCase()
options.dataType= options.dataType||'json'
if(options.type==='GET'){
xhr.open('GET', options.url+'?'+ params, true)
} else if(options.type==='POST'){
xhr.open('POST', options.url, true)
xhr.onreadystatechange= function(){
if(status>= 200&& status< 300){
options.success&& options.success(xhr.responseText, xhr.responseXML)
options.fail&& options.fail(status)
success: function(text,xml){//请求成功后的回调函数
fail: function(status){请求失败后的回调函数
三、axios和ajax区别
Axios：Axios是一个基于 promise的 HTTP库，可以用在浏览器和 node.js中。
AJAX：AJAX是与服务器交换数据并更新部分网页的，在不重新加载整个页面的情况下Ajax=异步 JavaScript和 XML（标准通用标记语言的子集）。
Axios从浏览器中创建 XMLHttpRequests，可以从 node.js创建 http请求，支持 Promise API，可以拦截请求和响应、转换请求数据和响应数据。
Ajax是一种用于创建快速动态网页的技术，Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
url:'http://jsonplaceholder.typicode.com/users',
responseType:'json',//默认的
url:'http://jsonplaceholder.typicode.com/users',
以下是可用的实例方法。指定的配置将与实例的配置合并
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
四、jquery中的$.ajax()方法,
1、运用ajax()方法，比其它如load()、get()、post()全局性函数它更多地关注实现过程中的细节；首先要了解其参数列表：
2、url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。
3、type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
4、timeout:要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
5、async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
6、cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息。
7、data:要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
8、dataType:要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
9、xml：返回XML文档，可用JQuery处理。
10、html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
11、script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
12、jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
13、beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求XMLHttpRequest对象是惟一的参数。
14、this;//调用本次ajax请求时传递的options参数
15、complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
16、function(XMLHttpRequest, textStatus){
17、this;//调用本次ajax请求时传递的options参数
18、success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
19、(1)由服务器返回，并根据dataType参数进行处理后的数据。
20、//data可能是xmlDoc、jsonObj、html、text等等
21、this;//调用本次ajax请求时传递的options参数
22、error：要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
23、function(XMLHttpRequest, textStatus, errorThrown){
24、//通常情况下textStatus和errorThrown只有其中一个包含信息
25、this;//调用本次ajax请求时传递的options参数
26、contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
27、dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
28、global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
29、ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
30、jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
31、username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
32、password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。
33、processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-formurlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
34、scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。
OK，关于ajax 实例和json和ajax结合使用的内容到此结束了，希望对大家有所帮助。
