原生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多个参数之间用&连接，参数名和参数值用=连接

post请求

-给服务器传参数，需要将参数写在send方法中：参数1=值1&参数2=值2...

-需要调用setRequestHeader()方法，把传送的参数封装成xml格式（模仿form表单提交数据：application/x-www-form-urlencoded）;

-传递的中文、特殊符号都需要编码

get/post的区别：

-请求数据量，get最多2k，post没有限制

-安全方面，post更安全

-传递数据的形式：get是url和参数一起发送，post是参数单独发送

jquery ajax请求

以上这篇原生js jquery ajax请求以及jsonp的调用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!