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使用示例
文章路径:http://ybzwz.com/article/gpccjc.html