ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP

AJAX简介：

ajax背景：

1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API，最早出现在谷歌浏览器，是在浏览器端进行网络编程(发送请求、接收响应)的技术方案。它可以使我们通过JavaScript直接获取服务端最新的内容而不必重新加载页面，让web更接近桌面应用的体验。

2.涉及到ajax操作的界面‘不能’使用文件协议(文件的方式)访问，实际是可以访问的。

3.ajax是一套API，核心提供的类型：XMLHttpRequest，其使用步骤如下：

	<script>//  1.创建 XMLHttpRequest 对象，xhr就类似浏览器的作用(发送请求 接收响应)var xhr = new XMLHttpRequest(); //xhr变量名可以为其它名,习惯使用xhr;此对象有兼容问题，解决方法如下：// 解决ajax的IE5-6兼容问题：var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXOBject('Microsoft.XMLHTTP');// 2.打开浏览器输入网址,可以是服务端任何文件，比如 .txt或.phpxhr.open('GET', 'http://day-03.io/6.Ajax练习/01.ajax的背景/time.php'); //第一个参数为请求方式，第二个参数为请求地址// 3.发送一个请求，如果是post请求方式，send里面可以传请求体，后面详细讲：xhr.send();// 4.响应，因为客户端永远不知道服务端何时才能返回我们的需求响应，所以，ajax API 采用时间机制(类似通知的方式)：xhr.onreadystatechange = function() {// 这里this.readyState有三个阶段：2,3,4；写在xhr.open()下面会有状态1的出现，如果需要捕获第一个状态的变化，需要注意代码执行顺序的问题，有0-4五个状态，四个阶段；if (this.readyState !== 4) return;//只有状态4表示请求响应已经完成，此时可以对数据进行操作：// 5.看结果console.log(this.responseText); //responseText可以接收到响应体，response也可以接收的响应体但是有区别};</script>

ajax中五种状态四种阶段代表什么：

ajax有五个状态，四种阶段，分别代表如下xhr.readyState的返回值：

	<script>var xhr = new XMLHttpRequest();console.log(xhr.readyState);// => 0：初始化，请求代理对象xhr.open('GET', 'time.php');console.log(xhr.readyState);// => 1：open 方法已经调用，建立一个与服务端特定端口的连接xhr.send();xhr.addEventListener('readystatechange', function() {switch (this.readyState) {case 2:// => 2:已经接收到了响应报文的响应头，但是还没有拿到体，this.getAllResponseHeaders()用来获取响应头console.log(this.getResponseHeader('server'));console.log(this.responseText);break;case 3:// => 3：正在下载响应报文的响应体，有可能响应体为空，也有可能不完整，这里不能保证响应体数据的完整性console.log(this.responseText);break;case 4:// => 4：一切 OK ，整个响应报文已经完整下载下来了，请求体的数据是完整的console.log(this.responseText);break;};});</script><script>var xhr = new XMLHttpRequest(); //----安装一个浏览器console.log(xhr.readyState); //--------------0：初始化请求代理xhr.open('GET', 'time.php'); //打开一个浏览器，建立一个与服务端端口的连接console.log(xhr.readyState); //--------------1：建立一个与服务端端口的连接xhr.send(); //发送请求console.log(xhr.readyState); //--------------1// 用addEventListener()的方式注册事件：xhr.addEventListener('readystatechange', function() {// if (this.readyState!==4) return;console.log(this.readyState); //-------------4,如果是注释掉上面的if条件，那么这里打印的值为：2，3，4,分别表示：// 2：已经接收到响应体的响应头，还没有拿到响应体// 3：正在下载响应体中// 4：已经下载完一个完整的响应体console.log(this.response); //服务端响应的东西，this.responseText也可以拿到响应体// 在可以使用this的作用域建议使用this，因为这样可避免沿着作用域链一级一级的向下找，优化了性能。});</script>

onload事件代替readystatechange事件：

onload事件实现readystatechange事件效果：

	<script>var xhr = new XMLHttpRequest();xhr.open('GET', 'time.php');xhr.send(null); xhr.onload = function() { //onload事件可以代替readystatechange事件，但是onload有兼容性问题，因此实际开发中依然不会使用onloadconsole.log(this.readyState);console.log(this.responseText);};</script>

ajax遵循http协议：

ajax遵循http协议进行发送请求，在ajax中以post方式进行请求时注意：设置请求头中content-type属性及值，send()中以urlencoded格式设置请求体，如：

	<script>var xhr = new XMLHttpRequest();xhr.open('POST', 'add.php'); //以POST的方式请求一个地址//xhr.setRequestHeader('keyA', 'valueA'); //setRequestHeader用来设置一个请求头内容// 请求体是 urlencoded 格式的内容，一定要设置请求头中的Content-Type 为'application/x-www-form-urlencoded'才可以正常请求：xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.send('key1=value1&key2=value2'); // 以 urlencoded 格式设置请求体</script>

数据接口：

数据接口：能提供特定的能力，有输入有输出，返回数据的地址，如下面服务端代码的URL：users.php即为一个数据接口，详细如下：

服务端代码：

	<?php//这里使用假数据做测试，实际开发中可能会从数据库获取数据：$data=array(array('id'=>1,'name'=>'法海','age'=>39),array('id'=>2,'name'=>'如经','age'=>14),array('id'=>3,'name'=>'道号','age'=>19));//当收到ajax发送的请求是做出相应的数据返回：if(empty($_GET['id'])){// 没有传递id返回所有数据，因为http协议中约定报文的内容是字符串，所以需要用json数据格式$json = json_encode($data);//==>返回json字符串：[{"id":1,"name":"法海","age":39},{"id":2,"name":"如经","age":14},{"id":3,"name":"道号","age":19}]echo $json;}else{foreach ($data as $item){if($item['id']!=$_GET['id']) continue;$json = json_encode($item);//==>[{"id":1,"name":"\u5e08\u5085","age":39}]echo $json;};};

通过ajax请求数据接口的数据：

	<script>var listElement = document.getElementById('list');var xhr = new XMLHttpRequest();xhr.open('GET', 'users.php?id=' + this.id); //这里可以使用？传参请求到具体的值，若不传入参数，则拿回所有数据遍历；在一个readystatechange事件中可以继续new XMLHTTPRequest()请求数据xhr.send();xhr.onreadystatechange = function() {if (this.readyState !== 4) return;var data = JSON.parse(this.responseText); //将json字符串转换为json对象//通过遍历的方式对数据data进行处理(渲染到页面)：for (var i = 0; i < data.length; i++) {console.log(data[i].id + '--' + data[i].name + '---' + data[i].age); //打印拿到的所有数据};};</script>

responseText和response区别：

responseTexxt返回的是普通字符串的形式的数据，不能通过 xhr.responseType='数据类型’设置返回的数据类型；response可以通过 xhr.responseType='数据类型’设置返回的数据类型。

	<script>var xhr = new XMLHttpRequest();xhr.open('GET', 'test.php');xhr.send();xhr.responseType = 'json'; //有兼容问题xhr.onreadystatechange = function() {if (this.readyState === 4) {// console.log(this.responseText);console.log(this.response);};};</script>

通过ajax发送post请求：

以post方式提交数据，需要注意：如果请求体是urlencoded格式，需要设置请求头的content-type，如：

以post方式通过ajax提交密码和用户名：

	<script>// 假设给按钮注册点击事件执行ajax请求提交数据：getElement('btn').onclick = function() {// 假设获取input中的值并给变量：var username = getElement('username').value;var password = getElement('password').value;var xhr = new XMLHttpRequest(); //在js中开启一个浏览器xhr.open('POST', 'data.php'); //打开浏览器并访问data.php//如果请求体是 urlencoded 格式 必须设置请求头为：Content-Type','application/x-www-form-urlencoded'xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');// xhr.send('username=' + username + '&password=' + password)，发送请求体，字符串拼接不好操作，推荐使用模板字符串：xhr.send(`username=${username}&password=${password}`);// 3. 根据服务端的反馈 作出界面提示xhr.onreadystatechange = function() {if (this.readyState !== 4) return;console.log(this.responseText); //若服务端有数据返回，则接收(服务端各个处理的反馈)};};</script>

服务端对用户名和密码做校验并做反馈：

	<?php// 判断是否提交数据并做出反馈：if(empty($_POST['username'])||empty($_POST['password'])){exit('请提交用户名和密码');};// 接收客户端传过来的数据并给变量：$username=$_POST['username'];$password=$_POST['password'];// 校验数据：通常使用数据库中的数据，这里使用假数据做测试：if($username==='admin' && $password==='123'){exit('登录成功！');};exit('用户名或者密码错误');

同步与异步模式：

同步模式：在相同的时间内只能做一件事情，ajax 操作会有楞等的情况，区别在于 send 方法会不会出现等待情况；

异步模式：在相同的时间内可以做不同的事情，比起同步模式，异步处理时间更短，但是时间差异不是很大，一般需要使用console.time()方法进行测试时间。

xhr.open()中的第三个参数async是控制是否开启异步模式，值为布尔值，默认是true则表示异步；

	<script>// 同步模式，加载时间长var xhrSync = new XMLHttpRequest()// open 方法的第三个参数是 async 可以传入一个布尔值，默认为 truexhrSync.open('GET', 'time.php', false) //关闭异步模式console.time('sync')xhrSync.send() //关闭异步模式后，等待请求响应的过程完全完成后再继续console.log(xhrSync.responseText)// console.log('end request')console.timeEnd('sync')// 异步模式，加载时间短var xhrSync = new XMLHttpRequest()// open 方法的第三个参数是 async 可以传入一个布尔值，默认为 truexhrSync.open('GET', 'time.php', true) //打开异步模式，默认是打开的console.time('sync')xhrSync.send()console.log(xhrSync.responseText)// console.log('end request')console.timeEnd('sync')</script>

ajax请求XML数据：

XML数据格式类似存在html标签中的内容，但是标签需要大写，文件后缀名为xml;ajax请求服务端xml数据时，需要指明响应头中content-type为application/xml，如：

ajax请求代码：

	<script>// 一般服务端响应一个简单的数据就是一个字符串，如果想要返回一个复杂的数据，一般采用json的格式；但是有很多老项目采用xml的方式存数据，此时也是需要获取数据的，如：// ajax请求XML格式的数据：var xhr = new XMLHttpRequest();xhr.open('GET', 'xml.php');xhr.send();xhr.onreadystatechange = function() {if (this.readyState !== 4) return;// this.responseXML 是专门用于获取服务端返回XML数据的，操作方式就是通过DOM(节点)的方式操作,但是需要服务端响应头中的 Content-Type 必须是 application/xml// header('Content-Type: application/xml');---需要服务端响应头中的 Content-Type 必须是 application/xmlconsole.log(this.responseXML.documentElement.children[0].innerHTML)console.log(this.responseXML.documentElement.getElementsByTagName('name')[0])}</script>

服务端XML数据：

	<?phpheader('Content-Type: application/xml');//告知响应头中响应文档类型为xml?><?xml version="1.1" encoding="utf-8"?><person><name>小明</name><age>14</age><gender>男</gender></person><!-- 上面不能有空行，否则报错 -->

封装ajax函数：

实际开发中使用ajax获取数据的地方很多，为了节省开发成本，一般是将ajax封装成一个函数，使用时调用即可，我封装了一个名为ajax的AJAX数据请求函数，其中参数解释为：

method：必须，请求方式,

url：必须,请求路径

askbody：可选参数,当不需要向服务端传入参数时，可以给null占位，但是不能不写

callback：必须，一个用来处理响应数据的回调函数，回调函数中的参数即为响应结果

	<script>function ajax(method, url, askbody, callback) {method = method.toUpperCase(); //当调用者输入的请求方式为小写字母时转大写var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXOBject('Microsoft.XMLHTTP'); //解决兼容问题//默认请求体是字符串形式的，当调用者输入的是对象形式时，需要转换为字符串形式：if (typeof askbody === 'object') {var arr = []; //定义一个空数组用来对askbody进行拆解再拼接为字符串for (var key in askbody) {var value = askbody[key]; //通过遍历的的方式将请求体对象中的键拿到，并使用[键]的方式将对应的值拿到给变量valuearr.push(key + '=' + value); //将键和值作为一组元素追加到数组中};askbody = arr.join('&'); //将数组每个元素之间用&符号分割后转换为字符串形式，并重新给askbody，join可以将数组转化为字符串，括号中加参数则表示给每个元素之间添加的字符。};//如果是以get方式请求:将url和askbody进行拼接:if (method === 'GET') {url += '?' + askbody;};xhr.open(method, url);//需要以post请求时,定义一个变量data接收请求体；当为get方式请求时，因为下面send中传入null或者不传,因此这里需要将data变量提升到整个函数作用域并初始值为null:var data = null;if (method === 'POST') { //当以post请求时，需要传入请求体，如下：data = askbody; //将上面处理好的askbody赋值给data变量供下面send中使用xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //当为post请求时，必须设置请求头中的Content-Type的值为application/x-www-form-urlencoded,且此代码要放到open的后面，否则会报错};xhr.send(data);xhr.addEventListener('readystatechange', function() {if (this.readyState === 4) {callback = callback || function() {alert('请传入数据处理回调函数');};callback(this.responseText);};});};//以get方式调用ajax：ajax('GET', 'time.php', null, function(result) {console.log(result);});//以post方式调用ajax：ajax('POST', 'add.php', {key1: 'value1',key2: 'value2'}, function(result) {console.log(result);});</script>

artTemplate引擎模板：

模板引擎实际上就是一个 API，模板引擎有很多种，使用方式大同小异，目的为了可以更容易的将数据渲染到 HTML中,这里采用artTemplate：https://aui.github.io/art-template/ 介绍，其文件实际是一个js文件。

模板属性位置：

模板写在script标签中，模板写在js中不便于维护；script标签的特点：1.innerHTML永远不会显示在界面上 2.如果script标签type属性的值不为 text/JavaScript 时，内部的内容不会作为JavaScript执行；

特别提醒：

在art-template内部是不能访问到外面的变量的，如果一定要访问的话，可以使用其提供的辅助方法将外面的变量赋值给内部变量。

使用步骤：

	// 1.选择一个模板引擎，去百度搜索,并引入这个模板的js文件：<script src='template-web.js'></script>// 2.准备一个模板 : each遍历数据，$value拿到的是当前被遍历的那个数据,{{}}中定义某个数据或模板语法，其他地方依然可以写HTML<script id="tmpl" type="text/x-art-template">{{each comments}}//comments为下面content中comments，注意名字一致：<tr><td>{{$value.id}}</td><td>{{$value.author}}</td><td>{{$value.content}}</td></tr>{{/each}}</script>//	3.下面将通过ajax获取数据，并将数据提供给art-template模板，之后在渲染到dom中：<script>var xhr = new XMLHttpRequest();xhr.open('GET', 'test.php');//test.php中返回数据xhr.send();xhr.onreadystatechange = function() {if (this.readyState === 4) {var res = JSON.parse(this.responseText);//3-1:将获取到的数据给tmpl模板中的comments：var content = {comments: res.data};//3-2：使用art-template模板引擎的API:template()将模板和数据整合得到渲染结果并赋值给变量：var html = template('tmpl', content); //3-3：将要渲染的结果渲染到某dom元素中：（这里渲染到id名为box的div中）document.getElementById('div').innerHTML = html;};};</script>// 4.例如：在art-template中是无法访问到$ (jQuery)这个变量的，如果想要访问到此变量，那么可以使用art-template提供的辅助方法：template.helper('art-template中变量名',function(){return jQuery;}),在使用时需要调用变量名，如：<script>template.helper('jqueryinart',function(){return jQuery;});</script><script id="tmpl" type="text/x-arttemplate">{{var $ = jqueryinart()}};</script>

同源策略和跨域请求：

同源： 协议 域名 端口相同的URL地址
同源策略： 不同源地址之间， 默认是不能相互发送ajax请求，后面有解决方案
不同源地址之间如果要相互请求， 必须服务端和客户端配合才可以
同源或者不同源说的是两个地址之间的关系， 不同源地址之间请求我们称之为跨域请求
现代化的 Web 应用中肯定会有不同源的现象， 所以必然要解决这个问题， 从而实现跨域请求。

跨域请求：

	<body><!-- link 真正的定义：链入一个文档，通过 rel 属性申明链入的文档与当前文档之间的关系 --><!-- <link rel="stylesheet" href="nprogress.css"> --><script>// 请求一个不同源的地址实际上就是我们所说的跨域请求// 校验目标：1 能发出去，2 能收回来// 可以发送请求的标签：img link script iframe// ## 1. img// 可以发送不同源地址之间的请求// 无法拿到响应结果// var img = new Image()// img.src = 'http://test.com/categories'// ## 2. link// 可以发送不同源地址之间的请求// 无法拿到响应结果// var link = document.createElement('link')// link.rel = 'stylesheet'// link.href = 'http://test.com/categories'// document.body.appendChild(link)// ## 3. script// 可以发送不同源地址之间的请求// 无法拿到响应结果，但是借助于JS能够执行var script = document.createElement('script')script.src = 'http://test/time.php'document.body.appendChild(script) // 开始发起请求    // 相当于请求的回调，在服务端定义一个函数调用如：echo "foo({$json}})"function foo(res) {console.log(res)}</script></body>

JSONP:

通过 script 标签请求一个服务端的 PHP 文件,这个文件返回的结果是一段JS，php文件作用是调用我们事先定义好的一个函数,从而将服务端想要给客户端发过去的数据以函数参数的形式发送给客户端

	<script src="http://test/data.php"></script><script>function myonload (data) {console.log(data)}</script>

服务端代码:

	 <?phpecho 'myonload({'time':12231234})';?>

封装jsonp函数：

实际开发中可能多次会用到跨域请求，此时为了节约开发成本，封装jsonp函数，其参数解释：

url:必须，请求的路径；

param：可选参数，用于请求时传入参数；

callback：必须，对响应回来的数据进行处理的回调函数，回调函数中的参数即为服务端响应回来的数据；

	<script>function jsonp(url, param, callback) {var functionName = 'JSONP_' + Date.parse(new Date()); //函数调用时定义一个不同的变量名if (typeof param === 'object') { //判断param参数是否是对象，若是的还将对象的形式转化为字符串形式var arr = [];for (var key in param) { //通过遍历的方式将param中的对象的每一个项的键和值拼接var value = param[key];arr.push(key + '=' + value);};param = arr.join('&'); //将数组转化为字符串形式，并且数组每个元素之间使用&分割};var script = document.createElement('script'); //创建一个script标签script.src = url + '?' + param + '&callback=' + functionName; //设置script标签的src属性值，以？传参的形式传入请求字符（包括函数名给服务端）//例如URL： 'http://test/server.php?name=jack&callback=JSONP_80284020025document.body.appendChild(script); //将script标签追加到body中，此时对地址URL发起请求window[functionName] = function(data) { //window.JSONP_80284020025=function(){};服务端对window.JSONP_80284020025函数进行调用且传入了服务端的数据$resultData实参callback(data); //data为函数window.JSONP_80284020025的形参，同时为回调函数callback的实参// (function(result) {//result为回调函数callback的形参//     console.logg(result)// })(data);//data此时作为实参供回调函数处理delete window[functionName]; //当处理完数据后释放内存，并删除script标签document.body.removeChild(script);};};// 调用：jsonp('http://test/server.php', {id: 123}, function(result) {console.log(result)});</script>

服务端代码：

	<?php$data = time();// 如果客户端采用的是 script对服务器发送的请求, 一定要返回一段 JavaScript，设置Content-Type为application/javascriptheader('Content-Type: application/javascript');$resultData = json_encode($data);$callback = $_GET['callback'];//接收到函数名JSONP_80284020025echo "typeof {$callback} === 'function' && {$callback}({$resultData})";//如果JSONP_80284020025为函数类型，则调用JSONP_80284020025函数，并将请求的数据作为函数参数传给函数处理

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/575339.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

我的第一个项目（人力资源管理之报表管理）

我的第一个项目（人力资源管理之报表管理）

2014年暑期实习老师要求的是人力资源管理系统&#xff0c;组队后组长分配给的任务是报表管理。 我做的报表管理&#xff0c;主要的功能是用户输入查询的时间区间和查询部门&#xff0c;然后将数据据库返回的数据显示在浏览器上。用户可以选择是否生成excel表格&#xff08;表格…
阅读更多...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）

jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）

jQuery中使用ajax&#xff1a; 在jQuery中使用ajax首先需要引入jQuery包&#xff0c;其引入方式可以采用网络资源&#xff0c;也可以下载包到项目文件中&#xff0c;这里推荐下载包到文件中&#xff1b;市面上有多个版本的jQuery库&#xff0c;这里到官网&#xff1a;https://…
阅读更多...
chartjs和echartsjs库简介

chartjs和echartsjs库简介

chart.js和echarts.js: 尽管我们已经掌握了canvas绘图和SVG矢量图&#xff0c;在实际开发中我们依旧不会使用canvas和SVG&#xff0c;因为考虑到开发成本&#xff0c;一般会采用相关的图表库进行辅助开发&#xff0c;市面上常用的图表库有chart.js和echarts.js&#xff1b;如果…
阅读更多...
弱智的我

弱智的我

【你能看到多少个人头? 】 0—4张: 弱智; 5—8张: 一般人; 9—11张: 特别感性; 11—13张: 精神分裂. 晕倒, 我是弱智的...就看到一个人头...转载于:https://www.cnblogs.com/zhangzujin/p/3877222.html
阅读更多...
POJ 1201

POJ 1201

d[i]表示在[0,i]这个区间内一共选了d[i]个数 对于每个为[ai,bi]的区间&#xff0c;你必须在这个区间上至少取ci个不同的整数&#xff0c;用d[i]如何表示&#xff1f; d[ bi ]-d[ ai-1 ] > ci Edge:(ai-1 -> bi) val ci 另外&#xff1a; 0<d[i]-d[i-1]<1 对应边Ed…
阅读更多...
typecho和wordpress模板了解、开发流程介绍、前台后台前端后端区分

typecho和wordpress模板了解、开发流程介绍、前台后台前端后端区分

网站模板搭建网站&#xff1a; 使用网站模板搭建网站很简单&#xff0c;只需要将相关文件放到你自己的服务器上面&#xff0c;之后在进行相关的配置即可。这里给大家介绍两款网站模板&#xff1a; typecho&#xff1a; 是一个轻量高效&#xff0c;简单操作就能搭建网站的模板…
阅读更多...
*[topcoder]IncrementingSequence

*[topcoder]IncrementingSequence

http://community.topcoder.com/stat?cproblem_statement&pm12107 此题想了半天&#xff0c;当时瞥到了Greedy&#xff0c;所以就想着贪心&#xff0c;最后的方法又纸上画了一下应该是对的。就是排序后依次看是不是满足要求。证明就是如果对数字X&#xff0c;有a和b都能够…
阅读更多...
在浏览器端调试代码并直接修改原文件、移动端虚拟键盘中实现搜索按钮

在浏览器端调试代码并直接修改原文件、移动端虚拟键盘中实现搜索按钮

在浏览器端调试代码并直接修改原文件&#xff1a; 此调试方法可以避免在浏览器调试完代码后在到原文件手动修改代码的弊端&#xff0c;其具体方法如下&#xff1a; 1.先将要调试的页面在浏览器&#xff08;Google&#xff09;打开&#xff0c;这里小编打开桌面test文件夹中的…
阅读更多...
Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统

Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统

Bootstrap简介&#xff1a; Bootstrap是Twitter&#xff08;推特&#xff09;开发的&#xff0c;目前最受欢迎的前端开源框架&#xff0c;基于jQuery用于开发HTML、CSS、JavaScript&#xff0c;简洁灵活&#xff0c;常用于开发响应式布局及移动端开发。其中文官方文档&#xf…
阅读更多...
JavaScript和jQuery的学习

JavaScript和jQuery的学习

还有12天就要回学校了&#xff0c;我的假期计划还能实现吗&#xff1f;在这12天里&#xff0c;需要把JavaScript和jQuery学完。我知道这两个技术对于前端网页开发非常重要。前期把HTML和CSS学完了&#xff0c;学的不是特别深&#xff0c;只是简单的过一下&#xff0c;自认为HTM…
阅读更多...
bootstrap中语义化标签、字体风格、文本布局、列表排列、特殊字体颜色及特殊背景颜色

bootstrap中语义化标签、字体风格、文本布局、列表排列、特殊字体颜色及特殊背景颜色

语义化标签&#xff1a; bootstrap中提供一些语义化标签&#xff0c;它们自带样式&#xff0c;这里介绍几个样式比较明显的语义化标签&#xff1a; <!-- 1.bootstrap中mark标签定义一个有淡黄色背景的文本 --> <p><mark>hello</mark></p><!…
阅读更多...
asp.net使用MVC4框架基于NPOI做导出数据到Excel表

asp.net使用MVC4框架基于NPOI做导出数据到Excel表

NPOI 是 POI 项目的 .NET 版本。POI是一个开源的Java读写Excel、WORD等微软OLE2组件文档的项目。 使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 WORD/EXCEL 文档进行读写。NPOI是构建在POI 3.x版本之上的&#xff0c;它可以在没有安装Office的情况下对Word/Exc…
阅读更多...
bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名

bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名

表格&#xff1a; bootstrap中用类定义了几个风格的表格&#xff0c;使用时给table标签加上类名即可&#xff0c;具体如下&#xff1a; 类名描述.table基础表格&#xff1a;标题加粗&#xff0c;只有水平的淡灰色边框线条&#xff0c;没有垂直方向的线条.table-striped条纹表…
阅读更多...
系统数据监控

系统数据监控

系统数据监控。 using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Text; using System.Threading; using Arch.CFramework.CLoggingAdapter; using Ctrip.Mobile.AppDownload.Utility;namespace Ctrip.Mobile.AppD…
阅读更多...
bootstrap中单个按钮、按钮组、徽章、进度条

bootstrap中单个按钮、按钮组、徽章、进度条

单按钮&#xff1a; 背景按钮&#xff1a;bootstrap提供了具有特殊意义背景的按钮样式&#xff0c;使用时只需给自己的按钮(button、input、a)加bootstrap提供的类名即可&#xff0c;其具体如下&#xff1a; 类名描述.btn基本按钮&#xff1a;灰色、有高度、宽度自适应、没有…
阅读更多...
openerp child_of操作符深度解析

openerp child_of操作符深度解析

child_of 此操作符&#xff0c;从代码来看&#xff0c;等价于&#xff1a; [(x,child_of,id)] > x.prarent_left >id.parent_left && x.parent_left < id.parent_right , 求x&#xff08;的集合&#xff09;。 为了形象的说明&#xff0c;我们一步步来&…
阅读更多...
bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠

bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠

分页&#xff1a; 分页功能是当遇到数据很多时&#xff0c;如果都放到一个页面上&#xff0c;那么找起来很不方便&#xff0c;而且不利于性能。此时采用分页功能就能很好的优化用户体验&#xff0c;可是如果自己开发分页功能&#xff0c;那么就会影响开发效率&#xff0c;boot…
阅读更多...
当ASP.NET Forms验证方式遭遇苹果IOS

当ASP.NET Forms验证方式遭遇苹果IOS

一、问题出现 我在用ASP.NET MVC4做微信开发的时候&#xff0c;用Forms验证方式做为authentication。 一般都是在web.config加&#xff1a; <authentication mode"Forms" ><forms loginUrl"~/Account/Login" name"webcookies" sliding…
阅读更多...
bootstrap中导航、导航栏、表单及自定义表单

bootstrap中导航、导航栏、表单及自定义表单

导航&#xff1a; bootstrap中使用列表封装了水平导航&#xff0c;其类样式如&#xff1a; 类名描述.nav给ul或ol&#xff0c;用于清除列表默认样式&#xff0c;并将列表项水平排列.nav-item给li,用于布局.nav-link给li里面的a,用于a布局.justify-content-center用于居中ul或…
阅读更多...
Haproxy安装及配置(转)

Haproxy安装及配置(转)

1.安装 # wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.20.tar.gz # tar zcvf haproxy-1.3.20.tar.gz # cd haproxy-1.3.20 # make TARGETlinux26 PREFIX/usr/local/haproxy #将haproxy安装到/usr/local/haproxy # make install P…
阅读更多...
最新文章

Copyright @ 2022~2023