原生js,jquery ajax请求以及jsonp的调用

ajax
    是用来处理前后端交互的技术,可以改善用户体验,其本质是
    XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容
    同步:任务一个一个的执行,只有前面的任务执行完才会执行下一个任务,如果前面的任务是耗时操作,则需要一直等待
    异步:多条任务并发执行,也就是一个任务的开启,不需要等待其他任务执行结束,效率较高

    ajax的语言载体是JavaScript,最大的特点是页面不刷新

1、获取ajax对象
        主流浏览器获取方式:火狐、谷歌、safari、opera、IE7以上
        var xhr = new XMLHttpRequest();
        IE7以下
        var xhr = new ActiveXObject("microsoft.XMLHttp");

2、发起请求
        创建请求:xhr.open(请求方式get/post,请求地址);
        发送请求:xhr.send(post请求数据/get设置null);

3、接收数据
        ajax可以接收字符串、html标签、css样式、xml、json
        通过监听onreadystatechange事件。来接收ajax状态的变化(readyState属性)
        readyState:
        -0:表示未初始化,对象已经建立,但是没调用onen方法
        -1:对象已建立,但是未调用send方法
        -2:发送数据,已调用send方法,但当前状态及http头未知
        -3:已接收部分数据,但是数据不全
        -4:数据接收完毕

4、常用属性和方法
        属性:
        -responseText:将响应的数据作为字符串返回,只读
        -responseXML:将响应的数据格式化为xml格式并返回,只读
        -status:当前请求的http状态码
        方法:
        -open
        -send
        -setRequestHeader:设置请求头

get请求

url以字符串形式传递数据,对中文、&、=需要特殊处理,可以使用encodeURIComponent()方法进行编码,编码后的内容在服务端不需要解码,可以正常接收,get多个参数之间用&连接,参数名和参数值用=连接

var xhr = null; //获取ajax对象 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else{ xhr = new ActiveXObject("Microsoft.XMLHttp"); } xhr.onreadystatechange = function(){ console.log(xhr.readyState); switch (xhr.readyState){ case 0: console.log("尚未初始化"); break; case 1: console.log("尚未建立连接"); break; case 2: console.log("正在发送数据"); break; case 3: console.log("正在接受数据"); break; case 4: console.log("数据接收完成"); //处理接到的数据,这下面是重点 var text = xhr.responseText; break; } } //创建请求 xhr.open(\'get\',\'http://localhost/PHP/ajax01.php?sel=4\'); xhr.send(null);

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzxsxg.html