HTTP协议、Ajax请求

  今天这篇文章呢,主要讲的就是关于HTTP协议、Ajax请求以及一些相关的小知识点。虽然内容不算多,可是是很重点的东西~

HTTP协议

1. http:超文本传输协议。简单、快速、灵活、无状态、无连接。
2. url:统一资源定位符。
     组成部分:协议名://主机名(主机ip):端口号/项目资源地址?传递参数的键值对#锚点
     eg: http://192.168.5.151:8080/js/index.php?name=zhangsan#top
     ① ip地址在同一网段是唯一的。如果是在公网中,整个公网的i是唯一的。
     ② 端口号默认是:80,可以省略不写。常见的端口号: 80 Apache 8080 tomcat
     ③ 本机ip:localhost 或者 127.0.0.1

【JSON 对象与JSON字符串】

1. JSON对象:JSON对象就是键值对的集合,键与值之间用:分隔,多对键值对之间用,分隔。
    注意:JSON对象,要求键必须使用""包裹的字符串。‘‘无效!!!
2. JSON字符串:将JSON对象,用字符串的形式进行包裹。可用单引号也可用双引号;
    如果用""包裹,里面用""包裹的键的双引号要用\转义符转移。

var jsonObj=‘{"name" : "zhangsan",age: 12,sex : "男"}‘; //报错,不能不用双引号包起来
var jsonObj="{‘name‘ : ‘zhangsan‘,‘age‘: 12,‘sex‘ : "男"}"; //报错,键必须用双引号包起来
var jsonObj="{‘name‘ : ‘zhangsan‘,age: 12,sex : "男"}"; //报错,不能单引号包着双引号

3. JSON对象与JSON字符串的相互转换:
    ① 对象转字符串:JSON.stringify(obj)
    ② 字符串转对象:JSON.parse(jsonObj)
    JQuery也提供了字符串转对象的方法:$.parseJSON(jsonObj)

console.log($.parseJSON(jsonObj)); //JSON对象转为字符串
var jsonObj=‘{"name" : "zhangsan","age": 12,"sex" : "男"}‘;
console.log(jsonObj);//本身打印出来是个字符串
var obj=JSON.parse(jsonObj); //字符串转对象
console.log(obj);
var str=JSON.stringify(obj); //对象转字符串
console.log(str);

4. JSON数组:将多个JSON对象组成数组的形式存放,称为JSON数组。
    JSON数组可以和JSON对象相互嵌套,也就是说,JSON对象的值可以是JSON数组。

//可以直接接收数组,数组内部有多个对象
var jsonArr=[
    {
     "name":"zhangsan",
     "hobby":[{"吃":"水果","玩":"游戏"}]
    },
    {
     "name":"zhangsan",
     "hobby":[{"吃":"水果","玩":"游戏"}]
    },
    {
     "name":"zhangsan",
     "hobby":[{"吃":"水果","玩":"游戏"}]
    }
];
var strArr=JSON.stringify(jsonArr); //JSON对象转数组
console.log(strArr);
var jsonArr1=JSON.parse(strArr); //JSON数组转为对象
console.log(jsonArr1)

后台请求数据的方法

1. $.load():选中当前界面的一个DOM节点。并在当前DOM节点中加载一块HTML代码片段;

接受的参数:
   ① 可以是一个html文件的地址,表示将整个的html文件加载到当前区域;
   $("#div1").load("test.html");
   ② 可以是一个html文件+各种选择器,表示选择该页面的指定区域进行加载。
   $("#div1").load("test.html #ul");

2. $.ajax():是JQuery中最底层的ajax函数。

参数接收一个大对象,用对象的键值对表示ajax请求的相关设置:

① type:表示Ajax请求的方法,可以是get和post

② url:表示请求的后台url地址。

③ success:表示请求成功的回调函数。回调函数将接受三个参数,其中第一个参数是请求成功返回的数据。后两个不用管不重要。

使用数据时,需注意返回的数据是JSON字符串还是JSON对象。

④ error:当请求失败时执行的回调函数。

⑤ complete:请求完成后,无论成功或者失败都会执行的回调函数.。

⑥ statusCode:接收一个对象,对象的键是各种status状态码,对象的值表示每种状态码对应的回调函数。

⑦ async:设为true表示异步请求(默认);设为false表示同步请求。

⑧ data:请求时,向后台请求的数据,是一个对象类型,以键值对的形式分别表示 name:value。非常常用!!!!!

⑨ dataType:与其返回的数据类型格式。常见的有 JSON/text/html

⑩ timeout:设置请求超时时间。

$.ajax({
    type:"get",
    url:"java1801.json?age=14", //往后台传参(小数据),也可以在后面加上?age=14
    async:true, //是否进行异步请求,不写默认是异步
    data:{ //往后台传参,以对象形式。发送到服务器的数据,将自动转换为请求字符串格式。
        "name":"zhangsan"
    },
    dataType:"text",
    timeout:1,//设置请求超时时间。默认就行,不用写
    success:function(data,textStatus,jqXHR){ //请求成功返回的回调函数
        console.log(data); //返回一个对象
        console.log(textStatus);//请求成功返回success
        console.log(jqXHR); //jqXHR对象
        console.log(jqXHR.responseText) //返回字符串
        console.log(jqXHR.responseJSON) //返回对象
    },
    error:function(XMLHttpRequest,textStatus,errorThrown){// 请求失败返回的回调函数
        console.log(XMLHttpRequest); //XMLHttpRequest对象
        console.log(textStatus); //错误信息:error、timeout
        console.log(errorThrown);  //捕获的异常对象:Not Found
    },
    complete:function(XHR,TS){ //返回success或者error ,不管请求成不成功都会执行
        console.log(XHR);
        console.log(TS);
    },
    statusCode:{ //请求成功或失败的状态码
        200:function(){
            console.log("请求成功!")
        },
        404:function(){
            console.log("页面没有找到")
        }
}

【检测页面中所有Ajax状态】

执行回调函数。可做了解。。。

$(document).ajaxStart(function(){  //Ajax请求开始时执行函数
    console.log(ajaxStart);
});
$(document).ajaxError(function(){   //Ajax请求发生错误时执行函数
    console.log(ajaxError);
});
$(document).ajaxSend(function(){  //Ajax请求发送前执行函数
    console.log(ajaxSend);
});
$(document).ajaxStop(function(){  //Ajax请求结束时执行函数
    console.log(ajaxStop);
});
$(document).ajaxSuccess(function(){  //Ajax请求成功时执行函数
    console.log(ajaxSuccess);
});

3. $.get():在$.ajax()的基础上,进行封装,默认使用get请求。

接受四个参数:
    ① 请求的后台url;
    ② 传递给后台的数据,对象类型。相当于ajax中的data属性;
    ③ 请求成功的回调函数,相当于ajax中的success;
    ④ 预期返回的数据类型,相当于ajax中的dataType;

4. $.post():使用方法同$.get()

5. $.getJSON():通过get方式,请求JSON数据。

$.get("java.json",function(data){
    console.log(data);
},"text");

$.post("java.json",function(data){
    console.log(data);
},"json");

$.getJSON("java.json",function(data){
    console.log(data);
});

【Ajax请求三大过程】

同步:页面代码在遇到JS代码时被阻断,等待JS代码请求完全完成后继续执行。

异步:页面代码在遇到JS代码时不会被阻断,等待JS代码请求完成后立即插入继续执行。

<script src="js/jquery-1.10.2.js"  async="async"></script>  //异步

延迟:页面代码在遇到JS代码时不会被阻断,等到JS代码请求完成后再等到页面代码加载完成后才能执行。

<script src="js/jquery-1.10.2.js"  defer="defer"></script>  //延时

常见的状态码

200-请求成功

202-服务器接受请求

400-代码错误

403-访问被拒绝

404-页面没找到

500-服务器错误

501-服务器不支持请求的功能

505-服务器不支持

以下我附上HTTP状态码详解的链接,里面有更加清楚的解释,大家可以自行查看:http://tool.oschina.net/commons?type=5

原文地址:https://www.cnblogs.com/yanglianwei/p/9031640.html

时间: 2024-11-03 07:19:23

HTTP协议、Ajax请求的相关文章

配置chrome支持本地(file协议)ajax请求

配置chrome支持本地(file协议)ajax请求 网址:配置chrome支持本地(file协议)ajax请求 将html代码拖拽进入chrome通过file协议浏览时,发送的ajax请求本地文件,会报跨域错误.XMLHttpRequest cannot load file:///E:/webs/extJS/ext-3.3.0/examples/csdn/combobox.txt?_dc=1414738973999. Cross origin requests are only support

观察HTTP协议中客户端向服务器发送的请求,理解并实现一个最简单的AJAX请求案例

一.什么是HTTP协议 HTTP协议即超文本传输协议,网站就是基于HTTP协议的,例如网站的图片.CSS.JS等都是基于HTTP协议进行传输的.HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范. 大白话的说,就是你在浏览器输入一个网址,例如http://baidu.com,这时你就是向百度的服务器发送了请求了....经过一系列你看不到的处理之后,你的浏览器出现一个百度的首页,这就是百度的服务器对你的浏览器的成功的响应. 二.在浏

配置Chrome支持本地(file协议)的AJAX请求

https://www.cnblogs.com/micua/p/chrome-file-protocol-support-ajax.html 什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击HTML文件,直接在浏览器中运行演示 如果此时Demo中有AJAX操作,浏览器就会报一个错: XMLHttpRequest cannot load file:

解决浏览器跨域限制发送ajax请求

一.什么是浏览器跨域限制?本质是什么? 所谓浏览器跨域限制,其实是为了数据安全的考虑由Netscape提出来限制浏览器跨域访问数据的策略,这是一中约定,正式叫法为浏览器同源策略,目前已经在大多数浏览器中支持. 本质上,所谓浏览器同源策略即:不允许浏览器访问跨域的Cookie,ajax请求跨域接口等.也就是说,凡是访问与自己不在相同域的数据或接口时,浏览器都是不允许的. 最常见的例子:对于前后端完全分离的Web项目,前端页面通过rest接口访问数据时,会出现如下问题: 不允许发送POST请求:在发

跨源Ajax请求

1.Ajax介绍 Ajax是现代交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,AJAX 的核心是 JavaScript 对象 XMLHttpRequest.该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术.简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户. 默认情况下浏览器

AJAX请求和跨域请求详解(原生JS、Jquery)

一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 本博客实验环境: python:2.7.11 web框架:tonado jquery:2.1.1 二.“伪”AJAX 由于

客户端ajax请求为实现Token验证添加headers后导致正常请求变为options跨域请求解决方法

客户端为了实现token认证,通过Jquery的ajaxSetup方法全局配置headers: 全局配置headers后会导致部分不需要token认证的请求变为options请求,导致跨域访问.报错信息如下: CORS概念 支持CORS请求的浏览器一旦发现ajax请求跨域,会对请求做一些特殊处理,对于已经实现CORS接口的服务端,接受请求,并做出回应. 有一种情况比较特殊,如果我们发送的跨域请求为"非简单请求",浏览器会在发出此请求之前首先发送一个请求类型为OPTIONS的"

浅谈jquery中的ajax请求和跨域请求

ajax请求数据的代码: $(function () { $.ajax({ url:url,//请求文件所在的url type:"get",//请求的方式 success:function (data) { console.log(data);//返回的数据 } })})这样请求来的数据一般情况下都可以使用,但是有时候在从这个域名到另外一个域名请求数据时往往会出现所谓的跨域请求问题, 浏览器均默认开启了同源策略,它指Ajax请求所在的页面和被请求的页面在协议.域名.端口均相同才能被访问

使用ajax请求遇到的跨域问题

今天在使用ajax发请求的时候遇到如下问题: 以[Access-Control-Allow-Origin]为关键字搜索的结果进行改进,但没有效果. 返回仔细查看错误提示,发现ajax请求的url是localhost的,页面访问的是127.0.0.1,程序认为进行了跨域. 这里简单记录下怎么判断请求是跨域的.三个条件必须相同才不是跨域:①协议类型,如http和https就是不同的协议:②主机名:③端口号. 而我们在发送请求的时候,DNS总是将localhost解析为127.0.0.1,所以总认为l