爱站程序员基地原生js的ajax请求
1.创建XMLHttpRequest对象
var xhr=new XMLHttpRequest();
2.准备发送请求 open()
xhr.open(\'请求类型\',\'url地址\',是否异步);
| 参数 | 描述 |
|---|---|
| 请求类型 | GET 或 POST |
| url | 文件在服务器上的地址 |
| 是否异步 | true(异步) / false(同步) |
3.发送请求数据 send()
xhr.send();
4.请求返回的回调函数
当页面的加载状态发生改变的时候readyState属性就会跟随发生变化，而这时readystatechange属性所对应的回调函数就会自动被调用。
xhr.onreadystatechange=function(){if(xhr.readyState==4 && xhr.status==200){console.log(xhr.responseText)}}
readyState状态码
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数(或函数名)，每当readyState属性改变时就会调用该函数 |
| readyState | 存有XMLHttpRequest的状态，从0-4发生变化 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成且响应已就绪 |
| status | 200：‘OK’ 404:未找到页面 |
实例：
get请求：
//步骤一:创建异步对象var ajax = new XMLHttpRequest();//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端ajax.open(\'get\',\'getStar.php?starName=\'+name);//步骤三:发送请求ajax.send();//步骤四:注册事件 onreadystatechange 状态改变就会调用ajax.onreadystatechange = function () {if (ajax.readyState==4 &&ajax.status==200) {//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的 console.log(xml.responseText);//输入相应的内容 }}
post请求：
//创建异步对象var xhr = new XMLHttpRequest();//设置请求的类型及url//post请求一定要添加请求头才行不然会报错xhr.setRequestHeader(\"Content-type\",\"application/x-www-form-urlencoded\");xhr.open(\'post\', \'02.post.php\' );//发送请求xhr.send(\'name=fox&age=18\');xhr.onreadystatechange = function () {// 这步为判断服务器是否正确响应if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.responseText);}};
方法封装：
function ajax_method(url,data,method,success) {// 异步对象var ajax = new XMLHttpRequest();// get 跟post 需要分别写不同的代码if (method==\'get\') {// get请求if (data) {// 如果有值url+=\'?\';url+=data;}else{}// 设置 方法 以及 urlajax.open(method,url);// send即可ajax.send();}else{// post请求// post请求 url 是不需要改变ajax.open(method,url);// 需要设置请求报文ajax.setRequestHeader(\"Content-type\",\"application/x-www-form-urlencoded\");// 判断data send发送数据if (data) {// 如果有值 从send发送ajax.send(data);}else{// 木有值 直接发送即可ajax.send();}}// 注册事件ajax.onreadystatechange = function () {// 在事件中 获取数据 并修改界面显示if (ajax.readyState==4&&ajax.status==200) {// console.log(ajax.responseText);// 将 数据 让 外面可以使用// return ajax.responseText;// 当 onreadystatechange 调用时 说明 数据回来了// ajax.responseText;// 如果说 外面可以传入一个 function 作为参数 successsuccess(ajax.responseText);}}}
JQuery的ajax请求
$.ajax()
| 参数 | 描述 |
|---|---|
| url | 链接地址，字符串表示 |
| data | 需发送到服务器的数据，GET与POST都可以，格式为{A: ‘…’, B: ‘…’} |
| type | “POST” 或 “GET”，请求类型 |
| timeout | 请求超时时间，单位为毫秒，数值表示 |
| cache | 是否缓存请求结果，bool表示 |
| contentType | 内容类型，默认为\”application/x-www-form-urlencoded\” |
| dataType | 服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json |
| success | 请求成功后，服务器回调的函数 |
| error | 请求失败后，服务器回调的函数 |
| complete | 请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用 |
| async | 是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行 |
| username | 访问认证请求中携带的用户名，字符串表示 |
| password | 返回认证请求中携带的密码，字符串表示 |
eg：
$.ajax({url: \"/greet\",data: {name: \'jenny\'},type: \"POST\",dataType: \"json\",success: function(data) {// data = jQuery.parseJSON(data); //dataType指明了返回数据为json类型，故不需要再反序列化...}});
$.post()
| 参数 | 描述 |
|---|---|
| url | 链接地址 |
| data | 需要发送到服务器的数据 |
| function | 请求成功后，服务器回调的函数 |
| dataType | 服务器返回数据的格式 |
eg：
$.post(\"/greet\",{name: \'Brad\'},function(data) {...},\"json\");
$.get()
参数所示意义与$.post()一致
$.get(\"/greet\",{name: \'Brad\'},function(data) {...},\"json\");
$.getJSON()
该方法使用GET方式执行Ajax请求，从服务器加载JSON格式数据。
$.getJSON(\"/greet\",{name: \'jenny\'},function(data) {...});
$.load()
该方法将服务器加载的数据直接插入到指定DOM中。
<div id=\"box\"></div>$(\'#box\').load(\"/greet\",{name: \'Brad\'});
$.getScript()
该方法使用GET方式执行Ajax请求，从服务器加载并执行回传的JavaScript。
$.load(url, func);
