jQuery中的ajax使用示例
这篇文章主要为大家详细介绍了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//设置同步异步的 });
看完上述内容,你们掌握jQuery中的ajax使用方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。