HTTP
http: 超文本传输协议. 特点: 简单, 快速, 灵活, 无状态, 无连接
URL: 统一资源定位符.
组成: 协议名:// 主机 IP: 端口号 / 项目资源地址? 传递参数的键值对 #锚点
ip 地址在同一个网段是唯一的. 如果是在公网中, 整个公网的 ip 是唯一的.
端口号默认是: 80, 可以省略不写. 常见的端口号: 8080---tomcat,80---Apache
本机 IP: localhost 或者 127.0.0.1
常见的状态码:
1XX: 信息状态码
100 Continue 继续, 一般在发送 post 请求时, 已发送了 http header 之后服务端将返回此信息, 表示确认, 之后发送具体参数信息
2XX: 成功状态码
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求, 但尚未处理
3XX: 重定向
301 Moved Permanently 请求的网页已永久移动到新位置.
302 Found 临时性重定向.
303 See Other 临时性重定向, 且总是使用 GET 请求新的 URI.
304 Not Modified 自从上次请求后, 请求的网页未修改过.
4XX: 客户端错误
400 Bad Request 服务器无法理解请求的格式, 客户端不应当尝试再次使用相同的内容发起请求.
401 Unauthorized 请求未授权.
403 Forbidden 禁止访问.
404 Not Found 找不到如何与 URI 相匹配的资源.
5XX: 服务器错误
500 Internal Server Error 最常见的服务器端错误.
503 Service Unavailable 服务器端暂时无法处理请求 (可能是过载或维护).
JSON 对象和 JS 字符串
1.JSON 对象: JSON 对象就是键值对的集合, 键与值之间用冒号分隔, 多对键值对之间用逗号分隔.
注意: JSON 对象, 要求键必须是双引号包裹的字符串. 用单引号无效.
2.JSON 字符串: 将 JSON 对象, 用字符串的形式进行包裹.
3.JSON 对象与 JSON 字符串的互相转换.
对象 --> 字符串: JSON.stringify();
字符串 --> 对象: JSON.parse();
JQuery 也提供了字符串转对象的方法:$.parseJSON();
- var jsonObj = {
- "name" : "zhangsan",
- "age" : "12",
- "sex" : "男"
- };
- //JSON 字符串
- var jsonObj1 = '{"name":"zhangsan","age":"12","sex":" 男 "}';
- var jsonObj2 = "{\"name\": \"zhangsan\",\"age\": \"12\",\"sex\": \" 男 \"}";
- //JS 中将 JSON 字符串转化成 JSON 对象
- console.log(JSON.parse(jsonObj1));
- //JS 中将 JSON 对象转化成 JSON 字符串
- console.log(JSON.stringify(jsonObj));
- //JQuery 中将 JSON 字符串转化成 JSON 对象
- console.log($.parseJSON(jsonObj2));
4.JSON 数组: 将多个 JSON 对象组成数组的形式存放, 称为 JSON 数组.
JSON 数组可以和 JSON 对象相互嵌套, 也就是说 JSON 对象的值可以是 JSON 数组.
- var jsonArr = [
- {
- "name":"zhangsan",
- "hobby":[{"0":"0"},{"1":"1"}]
- },
- {
- "name":"zhangsan",
- "hobby":[{"0":"0"},{"1":"1"}]
- },
- {
- "name":"zhangsan",
- "hobby":[{"0":"0"},{"1":"1"}]
- }
- ];
- AJAX
AJAX:Asynchronous Javascript And XML(异步的 Javascript 和 XML).
AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换, AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下, 对网页的某部分进行更新.
Ajax 应用场景:
场景 1 数据验证
场景 2 按需取数据
场景 3 自动更新页面
JQuery 对 Ajax 操作进行了封装, 在 jQuery 中 $.ajax() 方法属于最底层的方法, 第 2 层是 load(),$.get() 和 $.post() 方法, 第 3 层就是 $.getScript() 和 $.getJSON() 方法.
1,load() 方法: 载入 html 文档
load() 方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程 HTML 代码并插入 DOM 中. 它的结构为: load(url[,data][,callback]);
参数名称 | 类型 | 说明 |
url | String | 请求 HTML 页面的 URL 地址 |
data(可选) | Object | 发送至服务器的 key/value 数据, JSON 字符串 |
callback(可选) | Function | 请求完成时的回调函数,无论请求成功还是失败,加载完成后会执行函数 |
load() 方法的传递方式根据参数 data 来自动指定. 如果没有参数传递, 则采用 GET 方式传递; 反之则会自动转换为 POST 方式.
2,$.ajax(): 是 JQuery 中最底层的 Ajax 函数. 参数接受一个大对象, 用参数的键值对表示 ajax 请求的相关设置:
type: 表示 ajax 请求的方法, 可以是 get 和 post.
url: 表示请求的后台 URL 地址.
success: 表示请求成功的回调函数. 回调函数接收三个参数: 参数 1-- 请求成功接受的数据.
error: 当请求失败时, 执行的回调函数.
complete: 请求完成后, 无论成功还是失败都会执行的函数.
statusCode: 接收一个对象, 对象的键是各种状态码, 对象的值表示每种状态码对应的回调函数.
async: 设为 true 为异步, false 为同步. 默认是 true
data: 请求时, 向后台传递的数据, 是一个对象类型, 以键值对的形式分别表示 name:value
dataType: 预期返回的数据类型格式. 常见的有 JSON/text/html
timeout: 设置请求超时时间.
注意: 使用数据时, 需要注意返回的数据是 JSON 字符串还是 JSON 对象.
方法 | 作用 |
url | 请求的地址 |
type | 请求的方式 |
dataType | 告诉 jQuery,需要按照什么格式对服务器返回的数据进行解析,默认 json。 |
async | 设为 true 表示异步请求,设为 false 表示同步请求。默认为 true |
data | 往后台传递的数据 |
success | 请求成功的回调函数,返回 data 数据 |
error | 请求失败的回调函数 |
beforeSend | 请求发送之前调用的函数 |
complete | 不论请求是成功还是失败的,只要请求完成就会调用 |
statusCode | 接收一个对象,对象的键是各种状态码,对象的值表示每种状态码对应的回调函数。 |
timeout | 设置请求超时时间 |
- $.ajax({
- type:"get",
- url:"java1801.json",
- async:true,
- dataType:"json",
- data:{"name":"张三","age":12},
- success:function(data,textStatus,jqXRM){
- console.log(data);
- console.log(textStatus);
- console.log(jqXRM);
- console.log(jqXRM.responseText);
- console.log(jqXRM.responseJSON);
- },
- error:function(XMLHttpRequest, textStatus, thrownError){
- console.log(XMLHttpRequest);
- console.log(textStatus);
- console.log(thrownError);
- },
- complete:function(XMLHttpRequest, textStatus){
- console.log(XMLHttpRequest);
- console.log(textStatus);
- },
- statusCode:{
- 200:function(){
- console.log("请求成功");
- },
- 404:function(){
- console.log("请求失败");
- }
- },
- timeout:200
- });
[JS 中的同源策略]
在 JS 中, 当请求其他文件时, 要求被请求文件与当前文件必须处于同一主机名, 同一个协议名, 同一个端口号下, 否则请求将不能成功, 如果要请求非同源文件, 必须进行跨域请求设置.
3. 如果需要向服务器传递参数的话, 可以使用 $.get() 方法和 $.post() 方法还有后面的 $.ajax 方法.
$.get()/$.post(): 在 $.ajax() 的基础上, 进行封装, 默认使用 get 请求.
接收 4 个参数:
(1) 请求的后台 Url
(2) 传递给后台的数据, 对象类型, 相当于 ajax 中的 data 属性.
(3) 请求成功的回调函数, 相当于 ajax 中的 success
(4) 预期返回的数据类型, 相当与 ajax 中的 dataType
$.get() 方法 /$.post() 方法
参数名称 | 类型 | 说明 |
url | String | 请求 HTML 页面的 URL 地址 |
data(可选) | Object | 发送至服务器的 key/value 数据,会作为字符串凭接在 url 的后面 |
callback(可选) | Function | 请求完成时的回调函数 (只有当 Response 的返回状态是 success 的时候,才调用该函数) |
type (可选) | String | 服务器返回内容的格式,包括 xml、html、script、json、text、_default |
- $.get(
- "java1801.json", {
- "name": "zhangsan"
- },
- function(data) {
- console.log(data);
- },
- "json"
- );
4.$.getJSON(): 通过 Get 的方式, 请求 JSON 数据.
5.serialize() 方法会将表单中所有的内容拼接成 key=value&key=value 这样的字符串.
- $("#form input[type='button']:eq(0)").on("click",function(){
- var str = $("form:eq(0)").serialize();
- console.log(str);
- });
6.serializeArray() 方法会将表单中所有的内容拼接成字符数组.
- $("#form input[type='button']:eq(1)").on("click",function(){
- var arr = $("form:eq(0)").serializeArray();
- var obj = {};
- $.each(arr, function(index,item) {
- var keys = item.name;
- var value = item.value;
- obj[keys] = item.value;
- });
- console.log(JSON.stringify(obj));
- });
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style type="text/CSS">
- .error{
- color: red;
- }
- </style>
- <script src="js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript">
- $(function(){
- $("form:eq(0)").validate({
- debug:true,// 至验证不提交表单
- rules:{// 规则
- username:{
- required:true,
- maxlength:16,
- minlength:6
- }
- },
- messages:{// 提示信息
- username:{
- required:"必须输入",
- maxlength:"长度不能大于 16",
- minlength:"长度不能小于 16"
- }
- },
- });
- })
- </script>
- </head>
- <body>
- <form id="form">
- 用户名:<input type="text" name="username" /><br />
- 密 码:<input type="password" name="pwd" /><br />
- 确认密码:<input type="password" name="rpwd" /><br />
- 邮 箱:<input type="text" name="email" /><br />
- <input type="submit" value="提交"/>
- </form>
- </body>
- </html>
来源: https://www.cnblogs.com/JiangLai/p/9026744.html