这篇文章主要为大家详细介绍了jQuery中的ajax使用方法,文中示例代码介绍的非常详细,零基础也能参考此文章,感兴趣的小伙伴们可以参考一下。
创新互联建站服务项目包括历下网站建设、历下网站制作、历下网页制作以及历下网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,历下网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到历下省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
ajax --前后台分离开发 api(程序应用集---数据接口)
局部刷新技术
异步请求(请求和后续代码同时执行) 同步请求(等待请求执行完成在执行后续代码)
专门做后台数据的访问的
先学习原生js的ajax 对象 XMLhttprequest 对象 后台数据访问的对象
原生js在访问后台数据的时候专门写
1.实例化对象
2.open 连接远程服务器 参数: method 请求的方式 get post url:请求的服务器路径
async 当前的请求是同步还是异步 true 异步 false 同步 user 用户名 password 密码
send() 发送请求
4.响应事件onreadystatechange
5.渲染界面
var http = new XMLHttpRequest();
//2.建立服务器连接
http.open("get", "./data/student.txt");
//3.发送请求
http.send();
//4.服务器响应
http.onreadystatechange = function () {
//5.界面的渲染
//判断 获取最终读取完成状态
if (http.readyState == 4) {
//返回的数据都是string
//console.log(typeof http.responseText);
console.log(http.response);
//字符串类型的json数据转化为对象型json JSON.parse()
var data = JSON.parse(http.response);
console.log(data);
//对象json转化为string json JSON.stringify
//var strdata=JSON.stringify(data);
//console.log(strdata);
}
}
//原生ajax的封装
function method(meth, url, data, async, callback) {
//对象的创建
var http = new XMLHttpRequest();
//判断
if (meth == "get") {
//get 传递的数据在路径的后边 www.baidu.com?name=1&s=2
if (data) {
url += "?";
url += data;
}
http.open(meth, url, async);
http.send();
}
else {
http.open(meth, url, async);
//判断是否有数据
if (data) {
http.send(data);
}
else {
http.send();
}
}
//响应
http.onreadystatechange = function () {
//状态的判断
//状态码 200 success 500 服务器报错 404 服务器端页面丢失
if (http.readyState == 4 && http.status == 200) {
//将请求的数据返回
callback(http.response);
}
}
}
//域名解析就是localhost 没有写端口号默认80端口
//协议不一致会产生跨域
//端口不一致也会导致跨域
//域名不一致也会产生跨域
/*
* http://www.maodou.com/mao/list.html
* https://www.maodou.com/mao/list.html
* http://www.maodou.com:8080/mao/list.html
* http://www.dou.com/mao/list.html
* */
//跨域怎样解决
//cros 资源共享 在后端进行配置 配置完成之后 可以直接访问
//例如php 在后端文件里面写入一句话 header("Access-Control-Allow-Origin:"); 代表所有
//jsonp 跨域 在原生js里面叫src跨域 直接使用路径
//src可以连接远程路径
//直接使用script src属性直接连接后台的api进行远程访问
//在路径的后边带一个回调函数 就好了 后台的处理传回的回调函数
//下面演示jsonp 跨域的问题
//jsonp跨域原理是 在前端上使用src进行跨域 在接口上传入要执行的回调函数 (后台一定要处理回调函数 这样 前台的函数才有响应)
2.jquery里面的ajax请求
$.ajax({
method:"get",//请求的方式 type
url:"", //路径
data:{},//传递的参数
dataType:"",//数据类型
jsonpCallback:"",//jsonp 跨域的
success:function (res){
//成功
},
error:function (){
//请求失败
},
async:true//设置同步异步的
});