目录 一、AJAX技术简介 特点 二、AJAX书写步骤 三、响应处理和响应流程 四、使用ajax发送get请求 五、使用ajax发送post请求 六、方法抽取(了解) 七、jQuery 中 ajax...方法使用 八、使用 jQuery 发送 GET 方式 AJAX 请求 8.1、使用.ajax()方法 8.2、使用.get()方法 九、使用 jQuery 发送 POST 方式 AJAX 请求 9.1...响应处理,即对服务响应回浏览器的数据根据状态码和 AJAX 对象的状态信息进行不同的处理,在绑定状态改变的处理函数中写对应的逻辑代码即可。...1:载入,AJAX 对象开始发送请求 2:载入完成,AJAX 对象的请求发送完成 3:解析,AJAX 对象开始读取服务器的响应 4:完成,AJAX 对象读取服务器响应结束...beforeSend:发送请求前调用此函数,可用与如添加自定义 HTTP 头,检查请求参数是否合法。XMLHttpRequest 对象是唯一的参数。若在函数中返回 false 可以取消本次请求。
Js中fetch方法 fetch()方法定义在Window对象以及WorkerGlobalScope对象上,用于发起获取资源的请求,其返回一个Promise对象,这个Promise对象会在请求响应后被resolve...init: 一个配置项对象,包括所有对请求的设置。可选的参数有: method: 请求使用的方法,如GET、POST。...mode: 请求的模式,如cors、no-cors或者same-origin。...credentials: 请求的credentials,如omit、same-origin或者include,为了在当前域名内自动发送cookie,必须提供这个选项。...实例 发起请求 发起一个简单的资源请求,对于fetch请求返回一个Promise对象,这个Promise对象会在请求响应后被resolve,并传回Response对象。
JQuery 全局插件函数 原本要声明的工具函数(如 max()/min())如果声明为全局函数,会造成“全局对象(window)的污染;为了避免污染全局对象,可以把这些函数纳入到 JQuery 对象的名下...JQuery 常用AJAX函数 (1). $.get(url, data ,callback); 发起一个ajax的GET请求, 在请求主体中提交请求数据,如果服务器返回成功,响应消息,调用callback...函数,在方法中处理响应的数据 callback => function(data){} $.get会根据服务器端返回的响应消息内容类型自动决定如何处理,如果是application/json,会自动调JSON.parse...(url,data,callback); 发起一个ajax POST请求,并在请求主体中提交请求数据,如果服务器返回成功响应消息,调用callback,在callback方法中处理响应数据,使用方法三种...,提供非常多的可选项,可以处理各种情形,前面函数都是它的简化版,无法处理失败的情况 $.ajax({ // 请求方式post/pub/delete/head type:'GET' //请求地址
open函数有三个参数: 提交方式,如GET,POST url,get请求的的话可在后边加信息 一个bool值,表示是否使用异步请求,默认true var xmlHttp = createXMLHttpRequest...(); xmlHttp.open("POST", "/ajax_test/", true); 3.向服务端发送请求 post请求,发送的是个字符串,相当于post请求中的键值 xmlHttp.send(...3:开始读取服务器响应 4:读取服务器响应结束 XMLHttpRequest对象有一个onreadystatechange事件,可以监听这五个状态,它会在XMLHttpRequest对象的状态发生变化时被调用...xmlHttp.readyState属性中存放在此时的状态值 通过以上内容,我们可以监听到来自服务器的响应 xmlHttp.onreadystatechange= function(){...2.post请求需要设置请求头信息xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”),否则服务器端会忽略请求体中的数据
”(本段来自网络,个人觉得这段对js跨域描述得在清晰不过了)。..., dataType: json }); 在jQuery 1.2 中,您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据,如 "myurl?...其实原生态From 表单 POST 到一个后台处理脚本是不存在跨域问题,因为提交过程不牵涉到JS操作其它域名的对象,可是POST表单后,页面会刷新,给用户带来的体验不佳,这时我们经常会想到用jquery...服务端的解决方案的基本原理就是,由客户端将请求发给本域服务器,再由本域服务器的代理来请求数据并将响应返回给客户端。...个人小结 在项目开发过程如果能用get方式解决的就尽量使用它,毕竟get的性能也比post高,而且处理get跨域请求的方法也比较多,比如用jquery库的 getScript和getJson方法。
responseText 属性 如果来自服务器的响应并非 XML,请使用 responseText 属性。...responseXML 属性 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性: 请求 books.xml 文件,并解析响应: xmlDoc=xmlhttp.responseXML...事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。...Ajax和原生 Ajax与后台的data数据交互 注意:POST方式传data类数据的时候,原生 Ajax需要更改请求头(原因和原理都在代码注释中),jQuery会自动帮忙修改请求头;他们其实本质都是原生...//Django中的请求体是request.body,而request.POST是从request.body中把值拿到变为字典的 //request.POST解析请求体是有规则的
的工作流程 访问一个网站的过程,本质是多次 HTTP 请求/响应的交互,以搜狗搜索为例: 客户端(浏览器)输入 URL(如 https://www.sogou.com),向搜狗服务器发送 HTTP 请求...; 服务器接收请求,处理后返回 HTTP 响应(包含 HTML 页面、CSS、JavaScript 等资源信息); 浏览器解析响应内容,渲染成用户看到的页面(过程中可能触发多次请求,如加载图片、字体)。...,长度由 Content-Length 指定 关键组成部分解析 部分 说明 首行 包含 3 个字段:- 方法(如 GET/POST)- URL(请求的资源路径)- HTTP 版本(如 HTTP/1.1)...(如 Vue 文档的章节锚点) 可省略 URL Encode:特殊字符转义 URL 中 ?...请求的 4 种方式 实际开发中,可通过浏览器、表单、Ajax、代码等多种方式构造 HTTP 请求,以下为具体实现。
一、前端进行网络请求的关注点 大多数情况下,在前端发起一个网络请求我们只需关注下面几点: 传入基本参数( url,请求方式) 请求参数、请求参数类型 设置请求头 获取响应的方式 获取响应头、响应状态、响应结果...函数 open 用于初始化一个请求,用法: xhr.open(method, url, async); method:请求方式,如 get、post url:请求的 url async:是否为异步请求...六、jQuery对Ajax的封装 在很长一段时间里,人们使用 jQuery提供的 ajax封装进行网络请求,包括 $.ajax、$.get、$.post等,这几个方法放到现在,我依然觉得很实用。...这种 GET或 POST请求中 URL参数里的 "callback"部分。 error 类型: Function 。请求失败时调用此函数。...使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。"
选取单选按钮 点击元素 jQuery 事件方法语法 在 jQuery 中,大多数 DOM 事件都有一个等效的jQuery 方法。...通过 jQuery AJAX 方法,您能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。...HTTP 请求:GETvs. POST 两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。...phpecho '这是个从PHP文件中读取的数据。'; ?> jQuery $.post() 方法 $.post()方法通过 HTTP POST 请求向服务器提交数据。...然后我们连同请求(name 和 url)一起发送数据。 "demo_test_post.php"中的PHP 脚本读取这些参数,对它们进行处理,然后返回结果。 第三个参数是回调函数。
3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。 4:响应已完成;您可以获取并使用服务器的响应了。...三、 jQuery 中的 Ajax jQuery 中的 ajax 封装案例 //ajax 请求后台数据 var btn = document.getElementsByTagName("input")...()方法的传递方式根据参数 data 来自动指定,如果没有参数传递,则采用 GET 方式传递,反之,采用 POST 回调参数 必须在加载完成后才执行的操作,该函数有三个参数 分别代表请求返回的内容、请求状态...在项目中需要传递一些参数给服务器中的页面,那么可以使用$.get()和$.post()或$.ajax()方法 注意:$.get()和$.post()方法是 jquery 中的全局函数 $.get()方法...,因此其他人可以从浏览器的历史纪录中读取这些数据,如:账号、密码。
背景 在上一章学习 React 组件的时候,想增加 React 对 Ajax 支持的内容,却发现网上的教程竟然用 jQuery 完成 Ajax 请求,个人觉得为了发送一个简单的请求引入 jQuery 库杀鸡焉用宰牛刀啊...请求 let postReq = new Request(req, {method: 'POST'}); console.log(postReq.method); //"POST" Headers 对象...而在 Response 对象中也有一个 header 属性,但是响应头是只读的。...对了,就是为了离线应用,通过 Service Worker 浏览器能够获取请求头的内容,然后通过在浏览器中构建响应头来替换来自服务器的响应头以达到构建离线应用的目的(这方面内容以后再说)。...,Promise 形式的编程体验,但是它也不是完美的,最大的问题就是不能中断一个请求,并且无法检测一个请求的进度,这些在 XHR 中早就有很好的解决方案。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。...jQuery - AJAX get() 和 post() 方法 HTTP 请求:GET vs. POST 两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。...不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。 $.get(URL,callback); 必需的 URL 参数规定您希望请求的 URL。...可选的 callback 参数是请求成功后所执行的函数名。 $.post(URL,data,callback); 必需的 URL 参数规定您希望请求的 URL。.../json;charset=UTF-8", //定义发送请求的数据格式为JSON字符串 dataType: "json", //定义回调响应的数据格式为JSON字符串,该属性可以省略 success
,并调用执行绑定的函数 3、你知道jQuery中的选择器吗,有哪些选择器 大致分为:基本选择器,层次选择器,表单选择器 基本选择器:id选择器,标签选择器,类选择器等 层次选择器:如:$("form input...对象[下标]获取dom对象 将dom对象放入$("")中转为jQuery对象 6、jQuery中$.get()提交和$.post()提交的区别 1、$.get()使用GET方法来进行异步提交 $.post...()使用POST方法来进行异步提交 2、get请求方式将参数跟在url后进行传递用户可见 post请求则是作为http消息的实体内容发送给服务器,用户不可见 3、post传输数据比get大 4、get请求的数据会被浏览器缓存...通过远程HTTP POST请求载入信息. 16)load(url,[data],[callback])载入远程HTML文件代码并插入至DOM中. 15、AJAX都有哪些优点和缺点?...简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
然而,在以下情况中,请使用 POST 请求: ①无法使用缓存文件(更新服务器上的文件或数据库)向服务器发送大量数据(POST 没有数据量限制)。...这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。 为什么要有同源限制?...xhr.readyState==4表示请求已经结束,服务器响应完成。 status表示http请求的状态,200表示正常响应;404表示资源找不到;500表示服务器端错误。 ④发送ajax请求。...②主要是使用其它网站提供的javascript api如QQ。使用script的src可以直接读取跨域资源。 ③当然跨域还有其它处理方式:如代理服务器、改变domain、JSONP等。...②一般我首先统一页面和服务器编码,对请求和响应的Content-Type设置正确编码;对请求参数进行编码处理。
通过拦截到的这个已经解码成DefaultHttpRequest对象的HTTP请求,至少可以判断替换的HttpServerCodec编解码器已经生效了,但这第一个HTTP请求居然不是浏览器端发出的POST...这就引出了XHR请求的另一个问题CORS ? CORS跨域问题 对于HTTP协议,我们最熟悉的最常用HTTP 请求是POST,GET这些,OPTIONS是啥,没见过,唉学艺不精啊。...而我的netty http server并没有响应CORS的机制,所以响应这个OPTIONS请求。 CorsHandler 那么现在的问题变成了如何响应OPTIONS请求?...下面是eclipse中以大纲模式看到的ThriftServer类的全貌,可以看到关键的NettyServerTransport实例作为私有成员常量transport,且并没有提供可供外部读取的方法。...然而真正的POST请求还是没有响应 ? 看来问题还是没有彻底解决,下一篇文章继续。
实现一个AJAX异步调用和局部刷新 创建XMLHttpRequest对象,也就是创建一个异步调用对象 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL 设置响应HTTP请求状态变化的函数.../server/slider.json", true) GET与POST的区别 与POST相比,GET 更简单也更快,并且在大部分情况下都能用,然而,在以下情况中,必须使用POST请求: 无法使用缓存文件...("Content-type","application/x-www-form-urlencoded"); 设置响应HTTP请求状态变化的函数 在收到响应后相应数据会填充到XHR对象的属性,有四个相关属性会被填充...回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。 // 封装JSONP function getJSONP(url, callback) { if (!...如何在JQuery中使用JSONP呢,很简单,加个参数和改下数据返回类型 -> jsonp 、 dataType $.ajax({ url: "https://class.imooc.com/api
string:仅用于 POST 请求 1.3 onreadystatechange 事件 当请求被发送到服务器时,我们需要执行一些基于响应的任务。...0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪。...status 200: “OK” 404: 未找到页面;4XX: 客户端的问题; 5XX:服务器问题 1.4 服务器的响应 如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText...创建XMLHttpRequest对象 设置请求信息open(get|post,url,true|false) 向服务器发送请求 让XmlHttpRequest对象接受服务器的响应数据,通过创建的回调函数...这个是重点,看视频,一步一步走; 作业: 用户注册的实现 第二章 jQuery实现Ajax 传统方式实现Ajax的不足 步骤繁琐 方法、属性、常用值不好记忆 处理复杂数据(如XML)比较麻烦 浏览器兼容问题
jQuery - AJAX get() 和 post() 方法----jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。...----HTTP 请求:GET vs. POST两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。...----jQuery $.get() 方法$.get() 方法通过 HTTP GET 请求从服务器上请求数据。...phpecho '这是个从PHP文件中读取的数据。';?>----jQuery $.post() 方法$.post() 方法通过 HTTP POST 请求向服务器提交数据。...然后我们连同请求(name 和 url)一起发送数据。"demo_test_post.php" 中的 PHP 脚本读取这些参数,对它们进行处理,然后返回结果。第三个参数是回调函数。
AJAX 异步和同步: 客户端和服务器端相互通信的基础上 同步:客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 异步:客户端不需要等待服务器端的响应。...在服务器处理请求的过程中,客户端可以进行其他的操作。 Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。...请求方式:GET,POST * GET:请求在URL后面拼接,send方法传空参 * POST:请求通过send方法传入,...username=Tom",true); //发送异步请求 xmlhttp.send(); //接收并处理来自服务器的响应结果...> $.get() $.post() 用来发送get或post请求 <!
True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应。 ?...(后面会有http状态码的详细解读) 三.JQuery中的Ajax JQuery对原生Ajax做了很好的封装,使用起来非常简单方便,具体的很多方法如 $.ajax,$.post, $.get, $.getJSON...从表格中拎出关键点: 1.传递数据的方式不同:get是直接把请求数据放在url的后面,是可见的,post的请求数据不会显示在url中,是不可见的。...http请求中的一个重要关注点就是请求头和响应头的内容,从这两个头文件中可以看出很多东西,当我们用发送一个ajax请求的时候,如果没有达到预期的效果,那么就需要打开浏览器的调试工具,从NetWork中找到相应的...(3)可能会影响程序中的异常处理机制。 (4)安全问题,对一些网站攻击,如csrf、xxs、sql注入等不能很好地防御。