1 ajax原理
???Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建动态网页的技术,目的是显示动态局部刷新.通过XMLHttpResponse对象来向服务器发起异步请求,从服务器获取数据.(1) 异步的javascript: 使用javaScript语言及功能向服务器发起请求,当服务器处理完请求之后,自动执行javaScript回调函数.(客户端可以不需要等到服务器响应才能运行)(2) XML是一种标记语言,是ajax与后台交互传输数据格式之一(3) ajax只能向同源网站发起Http请求(端口,协议,域名都相同),跨域请求会报错利用Ajax可以实现:1 注册时,输入用户名自动检测该用户是否存在2 登录时提示密码用户名错误3 页面局部进行更新数据2 XMLHttpResponse基本属性
(1) onreadystatechange ?每次状态改变所触发事件的时间处理程序(2) responseText ?从服务器响应返回字符串形式数据(3) responseXML ??从服务器响应返回以XML（DOM兼容文档）数据对象(4) response ?????从服务器返回对象:如json对象(5) timeout ?表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止附: response类型由XMLHttpRequest.responseType属性的值决定 ???‘‘: ??????????字符串 ???‘document‘: ??Document对象 ???‘json‘: ??????json对象 ???‘text‘: ??????字符串 ???‘blob‘: ??????Blob对象,适合读取二进制文件var ajax = new XMLHttpRequest();ajax.open(‘GET‘, ‘http://www.example.com/page.php‘, true);var data = ajax.responseText;data = JSON.parse(data); ??将json字符串转json对象var last=JSON.stringify(obj) ??将json对象转字符串3 ajax状态码
200, OK，访问正常301, Moved Permanently，永久移动302, Move temporarily，暂时移动304, Not Modified，未修改307, Temporary Redirect，暂时重定向401, Unauthorized，未授权403, Forbidden，禁止访问404, Not Found，未发现指定网址500, Internal Server Error，服务器发生错误4 设置监听接口
onloadstart ?请求发出onprogress ??正在发送和加载数据onerror ?????请求失败onload ??????请求成功完成ontimeout ???用户指定的时限到期，请求还未完成onloadend ???请求完成，不管成果或失败5 原生javascript中ajax
{1} ?同步ajax请求,get请求:#定义一个触发函数fresh_codefunction fresh_code() { ???????let xhr = new XMLHttpRequest() ???????xhr.open(‘get‘, ‘/api/v1/regist_code‘, false); ?false代表同步,true代表异步请求 ???????xhr.send() ???????let regist_code = xhr.responseText ???????// 把注册码写到regist_code标签中 ???????let regist_code_span = document.getElementById(‘regist_code‘) ???????regist_code_span.innerHTML = regist_code ???} {2} ?异步ajax请求,get请求:var xhr = new XMLHttpRequest();// 指定通信过程中状态改变时的回调函数xhr.onreadystatechange = function(){ ?// 通信成功时，状态值为4,状态码为200 ?????if (xhr.readyState === 4 && xhr.status === 200) { ???????//xhr.response指接收到的responseText字符串 ?????????var data=JSON.parse(xhr.responseText); ?????????console.log(data) ???} ?????else { ?????console.error(xhr.statusText); ???} ?}};xhr.onerror = function (e) { ?console.error(xhr.statusText);};// open方式用于指定HTTP动词、请求的网址、是否异步xhr.open(‘GET‘, ‘/endpoint‘, true);// 发送HTTP请求xhr.send(null);{3} ?同步ajax请求,post请求var name = encodeURI("北京西");var data = "username=" + name + "&password=123";//调用send()函数send(data);function send(arg) { ?//调用创建对象函数 ?CreateXMLHttpRequest(); ?xmlhttp.onreadystatechange = callhandle; ?//get写法(请求方式,url,同步或异步)直接拼接到url,发送 ?//xmlhttp.open("GET","Default.aspx?goback=yes&arg=" + arg,true); ?//post写法(请求方式,url,同步或异步),需要额外设置请求头 ?xmlhttp.open("POST", "http://172.16.5.25:9011/dynamicStation/loginByAdmin", true); ?//用POST的时候一定要有这句 ?xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); ???xmlhttp.send(arg);}function CreateXMLHttpRequest() { ?#创建xmlhttp对象,进行判定 ?if (window.ActiveXObject) { ???xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ?} ?else if (window.XMLHttpRequest) { ???xmlhttp = new XMLHttpRequest(); ?}}4 jquery中ajax
$.ajax({ ???#请求方式 ???type:‘get‘, ???url:‘/studentsinfo‘, ???#请求格式为json ???dataType:‘json‘, ???#处理函数 ???success:function(data,status){ ???????console.log(data) ???????var d=data[‘data‘] ???????for(var i=0;i<d.length;i++){ ???????????document.write(‘<p>‘+d[i][0]+‘</p>‘) ???????} ?????}})也可以直接使用$get ?或者 ?$post 基本类似ajax的调用,只是在请求方式这块不用指定,原理一致!!今天就分享到这了,喜欢的小伙伴可以点下推荐哦!!非常感谢!!
浅析ajax原理与用法
原文地址：https://www.cnblogs.com/why957/p/9066678.html