// 服务器
// 从输入url到浏览器加载页面中间经历了什么呢?
// 1:将域名地址解析为 ip+端口号
// ---> 通过ip找到服务器 通过端口号找到运行的服务
// 2:浏览器找服务要文件,静态资源文件 html js css
// 3:服务给浏览器想要的 文件
// 4:浏览器收到文件后,浏览器开始解析文件,html css js
// 5;浏览器链接cpu gup 开始在浏览器渲染文字 图片 运算等
// 6: 浏览器上会渲染 html
// 7:跟服务器说拜拜。等在要东西的时候在跟服务器建立链接
<script>
// xhr 对象 记录客户端向服务器端沟通的全部过程
var xhr = new XMLHttpRequest();
// console.log(xhr);
var url = 'http://49.232.47.192:9528/api/goodList?page=1'
xhr.open('GET',url,true);
xhr.send(); // 发送请求
// 监听服务器响应时间
xhr.onreadystatechange = function(){
// 如果 4 表示客户端接收到服务器响应的数据
if(xhr.readyState === 4){
console.log(xhr);
console.log(xhr.responseText);
var str = xhr.responseText;
var obj = JSON.parse(str);
console.log(obj);
}
}
// 客户端想服务沟通,应该考虑哪些问题?
// 1:有很多服务,知道沟通的那个服务?
// 2:要的东西,具体在服务的哪里?--->接口
// -----> 请求地址 url
// 3: 用什么方式;找接口
// ----> 请求方式:get / post /delet/pull ..
// 4:接口需要什么内容需才能接口
// --->请求参数
// 5:接通接口后,客户端怎么知道服务给我东西了?
// ---> 监听响应事件
// ---> 请求 响应的过程
// 客户端-----请求--->服务器
// 服务器-----响应--->客户端
// 服务器 服务 接口之间关系
// ip 区分那个服务器
// 一个服务器上可以有很多个服务;
// 端口号区分那个服务
// 一个服务上可以有很多接口
// 接口地址区分
// 服务器雨服务器之间是独立,需要通过一些协议简历服务器之间连接;ftp http
// 服务与服务之间也是独立的 但是可以建立链接
// 接口与接口之间也是独立的、
</script>
<script>
// ajax是什么?
// ajax不是一个新的语言,他是实现客户端与服务器通信的方式,浏览器中使用XMLHttpRequest,实现ajax技术
// XMLHttpRequest 构造函数,作用创建通信对象。通信行为由xhr完成
var xhr = new XMLHttpRequest();
// 怎么完成通信的过程的?
// --->xhr完成通信的。分为以下几个步骤:
// 1:发送请求:地址 方式 参数(服务器需要的客户端数据)
// 1.1 参数的作用是什么?
// ----> 1:服务端需要的客户端数据,数据源头:在客户端
// 1.2 参数的存在形式
// ---->get http://49.232.47.192:9528/api/goodList?page=1 【?】后面都是参数
// 1.3 参数有多少个?
// --->多个 get http://xx.com/api/goodList?page=1&token=123dkfj&user=admin
// & 链接多个
var url = 'http://49.232.47.192:9527/api/goodList?page=1';
var method = 'GET';
// var parame = 'page=1';
// xhr.open(method, url, true);
// xhr.send();
// 2:监听响应
// 当readState 值发生变化时候触发函数
// xhr.onreadystatechange = function () {
// console.log('响应了');
// // status 200 表示通信成功,readState 表示客户端收到服务器的响应
// if (xhr.readyState === 4 && xhr.status == 200) {
// // 3:客户端对响应数据进行处理
// console.log(xhr.responseText);
// document.write(xhr.responseText)
// }
// }
xhr.open(method, url, false);
xhr.send();
console.log('2222');
document.write(xhr.responseText);
console.log('333')
// http://www.whyone.com/a/goodlist?page-1
</script>
<!--
jqeury是js的工具库,提供了操作dom遍历的api.有返回值的api,都返回jquery对象
为了支持链式调用jqApi,所以大部分api返回jq实例对象
使用jquery步骤:
1:下载安装 jquery.js 到本地
2:导入到需要使用的文件建
3:测试 $
-->
<script src="../plugin/jquery.js"></script>
<script>
// jqeury手册地址: https://jquery.cuishifeng.cn/jQuery.Ajax.html
// console.log($);
// console.log($.ajax);
var btn = document.querySelector("button");
btn.onclick = function(){
var url = 'http://49.232.47.192:9528/api/goodList';
/**
* $.get(url,params,function) 发送get气你过去
* 返回值:无
* 参一:url|string 请求地址
* 参二:params|object 请求参数
* 参三:fuanciotn 服务器响应后触发函数
* 回参data:服务端响应的数据
*/
$.get(url,{page:1},function(data){
console.log(data);
})
/**
* $.ajax(option) 发送网络请求
* 返回值:无
* 参数:option | object
* option.url 请求地址
* option.data 请求参数
* option.method:请求方式
* option.dataType:设置响应数据返回的类型 (json jsonp html xml)
* option.success 服务端响应成功触发函数
* option.error 通信中出现问题触发函数
* option.complete 无论成功还是失败都触发函数
* option.beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。
* option.dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
*/
// $.ajax({
// url:'http://49.232.47.192:9528/api/goodList', // 请求地址
// method:'get', // 请求方式
// data:{ // 请求参数
// page:2
// },
// success:function(res){ // 请求成成功,服务器响应成功触发函数
// // res 服务器响应的json数据,默认是json 对象
// // 处理服务端响应数据
// console.log(res);
// },
// error:function(){ // 通讯出现问题;执行这里
// }
// })
}
// btn.onclick = function(){
// var xhr = new XMLHttpRequest()
// // 2: xhr 发送请求
// var url = 'http://49.232.47.192:9528/api/goodList?page=1';
// xhr.open('GET',url,true);
// xhr.send();
// // 3:接受响应
// xhr.onreadystatechange = function(){
// if(xhr.readyState===4&& xhr.status ==200){
// console.log(xhr.responseText);
// }
// }
// }
</script>
AJAX相关
最新推荐文章于 2024-06-12 11:59:04 发布