AJAX 前端开发利器:实现网页动态更新的核心技术
AJAX
AJAX是开发者的梦想,因为你可以:
- 在不重新加载页面的情况下更新网页
- 在页面加载后请求来自服务器的数据
- 在页面加载后接收来自服务器的数据
- 在后台向服务器发送数据
HTML页面
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>让AJAX更改这段文字</h2>
<button type="button" onclick="loadDoc()">更改内容</button>
</div>
</body>
</html>
HTML页面包含一个 <div>
部分和一个 <button>
<div>
部分用于显示来自服务器的信息
<button>
调用一个函数(如果被点击)
该函数从Web服务器请求数据并显示它
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件,内容如下:
<h1>AJAX</h1>
<p>AJAX不是一种编程语言。</p>
<p>AJAX是一种从网页访问Web服务器的技术。</p>
<p>AJAX代表异步JavaScript和XML。</p>
什么是AJAX?
AJAX = 异步JavaScript和XML。
AJAX不是一种编程语言。
AJAX只是使用以下组合:
- 浏览器内置的XMLHttpRequest对象(用于从Web服务器请求数据)
- JavaScript和HTML DOM(用于显示或使用数据)
AJAX是一个具有误导性名称的技术。AJAX应用程序可能使用XML传输数据,但以纯文本或JSON文本传输数据同样常见。
AJAX允许通过在幕后与Web服务器交换数据,异步更新Web页面。这意味着可以更新Web页面的部分,而不必重新加载整个页面。
AJAX的工作原理
- 网页中发生事件(页面加载,按钮被点击)
- JavaScript创建XMLHttpRequest对象
- XMLHttpRequest对象向Web服务器发送请求
- 服务器处理请求
- 服务器将响应发送回网页
- JavaScript读取响应
- JavaScript执行适当的操作(例如页面更新)
AJAX - XMLHttpRequest对象
AJAX的核心是XMLHttpRequest对象。
XMLHttpRequest对象
所有现代浏览器都支持XMLHttpRequest对象。
XMLHttpRequest对象可用于在幕后与服务器交换数据。这意味着可以更新Web页面的部分,而无需重新加载整个页面。
创建XMLHttpRequest对象
创建XMLHttpRequest对象的语法:
variable = new XMLHttpRequest();
示例:
var xhttp = new XMLHttpRequest();
上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件,内容如下:
<h1>AJAX</h1>
<p>AJAX不是一种编程语言。</p>
<p>AJAX是一种从网页访问Web服务器的技术。</p>
<p>AJAX代表异步JavaScript和XML。</p>
跨域访问
出于安全原因,现代浏览器不允许跨域访问。
这意味着网页和它尝试加载的XML文件必须位于同一服务器上。
W3Schools的示例都打开位于W3Schools域上的XML文件。
如果您想在自己的网页上使用上述示例,则加载的XML文件必须位于您自己的服务器上。
XMLHttpRequest对象方法
方法 | 描述 |
---|---|
new XMLHttpRequest() |
创建一个新的XMLHttpRequest对象 |
abort() |
取消当前请求 |
getAllResponseHeaders() |
返回标头信息 |
getResponseHeader() |
返回特定标头信息 |
open(method,url,async,user,psw) |
指定请求 |
send() |
将请求发送到服务器 |
send(string) |
将请求发送到服务器 |
setRequestHeader() |
将标签/值对添加到要发送的标头 |
XMLHttpRequest对象属性
属性 | 描述 |
---|---|
onreadystatechange |
定义在readyState属性更改时调用的函数 |
readyState |
保存XMLHttpRequest的状态。 |
responseText |
以字符串形式返回响应数据 |
responseXML |
以XML数据形式返回响应数据 |
status |
返回请求的状态码 |
statusText |
返回状态文本(例如 "OK" 或 "Not Found") |
AJAX - 发送请求到服务器
XMLHttpRequest对象用于与服务器交换数据。
发送请求到服务器
要向服务器发送请求,我们使用XMLHttpRequest对象的open()
和send()
方法:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
方法描述:
open(method, url, async)
:指定请求类型- method: 请求类型:GET或POST
- url: 服务器(文件)位置
- async: true(异步)或 false(同步)
send()
:将请求发送到服务器(用于GET)send(string)
:将请求发送到服务器(用于POST)
GET还是POST?
GET比POST更简单更快,并且在大多数情况下都可以使用。
但是,在以下情况下始终使用POST请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)。
- 向服务器发送大量数据(POST没有大小限制)。
- 发送用户输入(可能包含未知字符),POST比GET更健壮和安全。
GET请求
一个简单的GET请求:
示例:
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
在上面的示例中,您可能会得到一个缓存的结果。为了避免这种情况,向URL添加一个唯一的ID:
示例:
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
如果要使用GET方法发送信息,请将信息添加到URL:
示例:
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
POST请求
一个简单的POST请求:
示例
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
要像HTML表单一样发送POST数据,请使用setRequestHeader()
添加带有HTTP头的请求。在send()
方法中指定要发送的数据:
示例
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
方法描述:
setRequestHeader(header, value)
:向请求添加HTTP头- header: 指定标头名称
- value: 指定标头值
文件位于服务器上的URL
open()
方法的url参数是指向服务器上文件的地址:
xhttp.open("GET", "ajax_test.asp", true);
文件可以是任何类型的文件,如 .txt 和 .xml,或服务器脚本文件,如 .asp 和 .php(它们可以在发送响应之前在服务器上执行操作)。
异步 - True还是False?
服务器请求应该异步发送。
open()
方法的async参数应设置为true:
xhttp.open("GET", "ajax_test.asp", true);
通过异步发送,JavaScript无需等待服务器响应,而是可以:
- 在等待服务器响应时执行其他脚本
- 在响应准备好后处理响应
onreadystatechange
属性
使用XMLHttpRequest对象,您可以定义在请求接收答案时要执行的函数。
该函数在XMLHttpResponse对象的onreadystatechange
属性中定义:
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件,内容如下:
<h1>AJAX
</h1>
<p>AJAX不是一种编程语言。</p>
<p>AJAX是一种从网页访问Web服务器的技术。</p>
<p>AJAX代表异步JavaScript和XML。</p>
同步请求
要执行同步请求,将open()
方法中的第三个参数更改为false:
xhttp.open("GET", "ajax_info.txt", false);
有时候async = false
用于快速测试。您还会在旧的JavaScript代码中找到同步请求。
由于代码将等待服务器完成,因此无需onreadystatechange
函数:
示例
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
不推荐使用同步XMLHttpRequest(async = false
),因为JavaScript将停止执行,直到服务器响应准备就绪。如果服务器很忙或很慢,应用程序将挂起或停止。
同步XMLHttpRequest正在从Web标准中删除的过程中,但此过程可能需要很多年。
现代开发工具建议警告使用同步请求,可能在发生时抛出InvalidAccessError
异常。
AJAX - 服务器响应
在AJAX中,通过onreadystatechange
属性、readyState
属性、status
属性和statusText
属性来管理XMLHttpRequest对象的状态和服务器响应。
onreadystatechange
属性定义在
readyState
属性更改时要调用的函数。readyState
属性保存 XMLHttpRequest 的状态。
- 0:请求未初始化
- 1:服务器连接已建立
- 2:接收请求
- 3:处理请求
- 4:请求完成且响应准备就绪
status
属性200:"OK"
403:"Forbidden"
404:"Page not found"获取完整列表请查看 Http Messages Reference
statusText
属性返回状态文本(例如 "OK" 或 "Not Found")
每次 readyState
更改时都会调用 onreadystatechange
函数。
当 readyState
为 4 且 status
为 200 时,表示响应已准备好。
示例
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
上述示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件。
<h1>AJAX</h1>
<p>AJAX 不是一种编程语言。</p>
<p>AJAX 是一种从网页访问 Web 服务器的技术。</p>
<p>AJAX 代表异步 JavaScript 和 XML。</p>
onreadystatechange
事件被触发四次(1-4),每次 readyState
更改都会触发一次。
使用回调函数
回调函数是作为参数传递给另一个函数的函数。
示例
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction1(xhttp) {
// 具体操作在这里
}
function myFunction2(xhttp) {
// 具体操作在这里
}
服务器响应属性和方法
responseText
以字符串形式获取响应数据responseXML
以 XML 数据形式获取响应数据getAllResponseHeaders()
从服务器资源返回所有标头信息getResponseHeader()
从服务器响应返回特定的标头信息
示例
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
}
};
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
AJAX XML 示例
AJAX可用于与XML文件进行交互式通信。以下是一个展示如何使用AJAX从XML文件中获取信息的示例:
示例说明
当用户点击上面的 "获取 CD 信息" 按钮时,将执行 loadDoc()
函数。
loadDoc()
函数创建一个XMLHttpRequest对象,添加在服务器响应就绪时要执行的函数,并将请求发送到服务器。
当服务器响应就绪时,将构建一个HTML表格,从XML文件中提取节点(元素),最终使用包含XML数据的HTML表格更新 "demo" 元素:
LoadXMLDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table = "<tr><th>标题</th><th>艺术家</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
在上述示例中,通过点击按钮触发 loadDoc()
函数,该函数使用AJAX从名为 "cd_catalog.xml" 的XML文件中获取信息。当服务器响应就绪时,myFunction()
函数会解析XML并构建一个包含CD信息的HTML表格,最终更新具有 "demo" ID 的元素。
AJAX PHP 示例
AJAX可用于创建更交互式的应用程序。以下示例演示了如何在用户在输入字段中输入字符时,网页可以与Web服务器通信:
示例说明
在上述示例中,当用户在输入字段中键入字符时,将执行名为 "showHint()" 的函数。该函数由 onkeyup
事件触发。
以下是HTML代码:
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>在下面的输入字段中开始输入名字:</b></p>
<form>
姓氏:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>建议:<span id="txtHint"></span></p>
</body>
</html>
代码解释
首先,检查输入字段是否为空(str.length == 0
)。如果是,清除 txtHint
占位符的内容并退出函数。
但是,如果输入字段不为空,则执行以下操作:
- 创建一个
XMLHttpRequest
对象 - 创建在服务器响应就绪时要执行的函数
- 将请求发送到服务器上的 PHP 文件(gethint.php)
- 注意,添加了
q
参数gethint.php?q="+str
str
变量保存输入字段的内容
PHP 文件 - "gethint.php"
PHP文件检查一个包含名字的数组,并将相应的名字返回给浏览器:
<?php
// 包含名字的数组
$a[] = "Anna";
$a[] = "Brittany";
// ...(省略了其他名字)
// 从 URL 获取 q 参数
$q = $_REQUEST["q"];
$hint = "";
// 如果 $q 与 "" 不同,则从数组中查找所有提示
if ($q !== "") {
$q = strtolower($q);
$len = strlen($q);
foreach ($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
// 如果没有找到提示,则输出 "no suggestion",否则输出正确的值
echo $hint === "" ? "no suggestion" : $hint;
?>
在上述示例中,当用户在输入字段中输入字符时,通过AJAX与服务器通信,并从PHP文件中获取相应的建议。建议将在 "txtHint" 元素中显示。
AJAX ASP 示例
AJAX可用于创建更交互式的应用程序。以下示例演示了如何在用户在输入字段中输入字符时,网页可以与Web服务器通信:
示例说明
在上述示例中,当用户在输入字段中键入字符时,将执行名为 "showHint()" 的函数。该函数由 onkeyup
事件触发。
以下是HTML代码:
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "gethint.asp?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>在下面的输入字段中开始输入名字:</b></p>
<form>
姓氏:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>建议:<span id="txtHint"></span></p>
</body>
</html>
代码解释
首先,检查输入字段是否为空(str.length == 0
)。如果是,清除 txtHint
占位符的内容并退出函数。
但是,如果输入字段不为空,则执行以下操作:
- 创建一个
XMLHttpRequest
对象 - 创建在服务器响应就绪时要执行的函数
- 将请求发送到服务器上的 ASP 文件(gethint.asp)
- 注意,添加了
q
参数gethint.asp?q="+str
str
变量保存输入字段的内容
ASP 文件 - "gethint.asp"
ASP文件检查一个包含名字的数组,并将相应的名字返回给浏览器:
<%
response.expires=-1
dim a(30)
' 填充数组
a(1)="Anna"
a(2)="Brittany"
' ...(省略了其他名字)
' 从 URL 获取 q 参数
q=ucase(request.querystring("q"))
' 如果 q 的长度大于 0,则查找数组中的所有提示
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
' 如果没有找到提示,则输出 "no suggestion",否则输出正确的值
if hint="" then
response.write("no suggestion")
else
response.write(hint)
end if
%>
在上述示例中,当用户在输入字段中输入字符时,通过AJAX与服务器通信,并从ASP文件中获取相应的建议。建议将在 "txtHint" 元素中显示。
AJAX 数据库示例
AJAX可用于与数据库进行交互式通信。以下示例演示了如何使用AJAX从数据库获取信息:
示例
选择一个客户:
<select onchange="showCustomer(this.value)">
<option value="">选择客户:</option>
<option value="ALFKI">ALFKI</option>
<option value="ANATR">ANATR</option>
<option value="ANTON">ANTON</option>
<!-- 其他选项 -->
</select>
<div id="txtHint">客户信息将在此处列出...</div>
示例说明 - showCustomer() 函数
当用户在上面的下拉列表中选择一个客户时,将执行名为 "showCustomer()" 的函数。该函数由 "onchange" 事件触发:
function showCustomer(str) {
var xhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xhttp.open("GET", "getcustomer.php?q="+str, true);
xhttp.send();
}
showCustomer()
函数执行以下操作:
- 检查是否选择了客户
- 创建一个
XMLHttpRequest
对象 - 创建在服务器响应就绪时要执行的函数
- 将请求发送到服务器上的文件
注意,将一个参数(q
)添加到 URL(带有下拉列表的内容)
AJAX 服务器页面 - "getcustomer.php"
由上面的 JavaScript 调用的服务器上的页面是一个名为 "getcustomer.php" 的 PHP 文件。
"getcustomer.php" 中的源代码针对数据库运行一个查询,并以 HTML 表格的形式返回结果:
<?php
$mysqli = new mysqli("servername", "username", "password", "dbname");
if($mysqli->connect_error) {
exit('Could not connect');
}
$sql = "SELECT customerid, companyname, contactname, address, city, postalcode, country
FROM customers WHERE customerid = ?";
$stmt = $mysqli->prepare($sql);
$stmt->bind_param("s", $_GET['q']);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($cid, $cname, $name, $adr, $city, $pcode, $country);
$stmt->fetch();
$stmt->close();
echo "<table>";
echo "<tr>";
echo "<th>CustomerID</th>";
echo "<td>" . $cid . "</td>";
echo "<th>CompanyName</th>";
echo "<td>" . $cname . "</td>";
echo "<th>ContactName</th>";
echo "<td>" . $name . "</td>";
echo "<th>Address</th>";
echo "<td>" . $adr . "</td>";
echo "<th>City</th>";
echo "<td>" . $city . "</td>";
echo "<th>PostalCode</th>";
echo "<td>" . $pcode . "</td>";
echo "<th>Country</th>";
echo "<td>" . $country . "</td>";
echo "</tr>";
echo "</table>";
?>
在上述示例中,当用户选择一个客户时,通过AJAX与服务器通信,并从数据库中获取相应的客户信息。客户信息将以HTML表格的形式显示在具有 "txtHint" ID 的元素中。
在HTML表格中显示XML数据
此示例循环遍历每个 <CD>
元素,并在HTML表格中显示 <ARTIST>
和 <TITLE>
元素的值:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<button type="button" onclick="loadXMLDoc()">获取我的CD收藏</button>
<br><br>
<table id="demo"></table>
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "cd_catalog.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
在HTML div元素中显示第一个CD
此示例使用一个函数来在具有id="showCD"的HTML元素中显示第一个CD元素:
<script>
displayCD(0);
function displayCD(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this, i);
}
};
xmlhttp.open("GET", "cd_catalog.xml", true);
xmlhttp.send();
}
function myFunction(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("CD");
document.getElementById("showCD").innerHTML =
"Artist: " +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"<br>Title: " +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"<br>Year: " +
x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
</script>
在CD之间导航
要在上述示例中在CD之间导航,添加next()
和previous()
函数:
<script>
var i = 0;
function next() {
// 显示下一个CD,除非你在最后一个CD上
if (i < x.length-1) {
i++;
displayCD(i);
}
}
function previous() {
// 显示前一个CD,除非你在第一个CD上
if (i > 0) {
i--;
displayCD(i);
}
}
</script>
点击CD时显示专辑信息
最后一个示例显示了当用户点击CD时如何显示专辑信息:
<script>
function displayCD(i) {
document.getElementById("showCD").innerHTML =
"Artist: " +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"<br>Title: " +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"<br>Year: " +
x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
</script>
最后
为了方便其他设备和平台的小伙伴观看往期文章:
微信公众号搜索:Let us Coding
,关注后即可获取最新文章推送
看完如果觉得有帮助,欢迎点赞、收藏、关注
AJAX 前端开发利器:实现网页动态更新的核心技术的更多相关文章
- 前端开发利器—FIDDLER 转
http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器—FIDDLER 1.Fiddler相对其他调试工具 ...
- 前端开发利器-Brackets IDE
是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器 ...
- 微信公众号开发C#系列-12、微信前端开发利器:WeUI
1.前言 通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识.后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了.关于手机端的浏览器的兼容性问题相信一直是开发者们 ...
- 前端开发利器 Sublime Text 3 使用技巧和总结笔记
这篇文章是本人在使用该工具进行前端开发的自我总结,思路也许不是很清楚,不过还是希望对读者的你有所帮助,千万别把这边文章收藏起来发霉哦,无论背多少次快捷键,还不及自己多实际操作几次. 目前官方版正式版 ...
- 前端开发利器 livereload -- 从此告别浏览器F5键
各位从事前端开发的童鞋们,大家每天coding && coding,然后F5 && F5,今天推荐一个静态文件在浏览器中自动更新的扩展 livereload,不同手动刷 ...
- 前端开发利器webStorm
这里推荐一个前端开发工具webStorm.用了大概快半年了,发现所有其他工具无出其右的.目前最新版本已经到4.0.2,半年前还是2.X 相比aptana.dreamweaver.sublime和vim ...
- 前端开发利器VSCode
最近找到一款非常好用的开发利器,VSCode.一直认为微软做的东西都很一般,这个软件让我刮目相看了. 之前使用webstorm卡的不行,换了这个非常好用. 用着还不错,这里记录下一些使用的心得. VS ...
- 前端开发利器自定义Iconfont图标
前端开发难免遇到很多地方需要图片来展示,以往我们都会使用img.background.font文件实现图片,本人使用bootstrap,但由于前端比较火的bootstrap的font库太少不能满足我们 ...
- 前端开发利器 Emmet 介绍与基础语法教程
在前端开发的过程中,编写 HTML.CSS 代码始终占据了很大的工作比例.特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”.闭合标签等.而现在 Emmet 就是为了提高代码编写 ...
- [转] 前端开发利器--Brackets 的七种武器和旁门左道
转自:http://www.jianshu.com/p/ff7798aa4548 Brackets是Adobe开发的web编辑器,是一款免费开源.多平台支持的软件,并在于GitHub上维护.Brack ...
随机推荐
- django学习第六天---shell指令,单表基于双下划线的模糊查询,distinct注意点,字段的choices属性,url反向解析,orm多表操作创建表
shell指令 命令 python manage.py shell 在Terminal,执行上面这个指令会进入到python解释器环境中,并且加载了我们当前django项目配置环境,所以可以在当前sh ...
- 记一个 Andorid 生成文件失败的bug
Android生成文件失败:java.lang.IllegalStateException:Failed to build unique file: /storage/emulated/0/... 1 ...
- 使用二进制重排 & Clang插桩技术点来进行iOS冷启动进行优化
1.冷启动 1.1 什么是冷启动? 冷启动是指内存中不包含该应用程序相关的数据,必须要从磁盘载入到内存中的启动过程. 注意:重新打开 APP, 不一定就是冷启动. 当内存不足,APP被系统自动杀死后, ...
- 【Azure 存储服务】Azure Storage Account Queue中因数据格式无法处理而在一个小时内不在可见的问题
问题描述 在从Storage Account 队列中获取数据(Queue),在门户中,明显看见有数据,但是通过消费端代码去获取的时候,就是无法获取到有效数据的情况.获取消息的代码如下: 问题解答 经过 ...
- 【Azure 存储服务】ADLS Gen 2 Backup/软删除/Version管理/快照等功能参考资料
问题描述 ADLS Gen 2 存储的备份,软删除和version管理, 快照等功能应该怎么启用? 问题回答 存储的备份 测试显示 Premium 定价层 的 ADLS Gen 2 在中国区Azure ...
- Go语言的100个错误使用场景(55-60)|并发基础
目录 前言 8. 并发基础 8.1 混淆并发与并行的概念(#55) 8.2 认为并发总是更快(#56) 8.3 分不清何时使用互斥锁或 channel(#57) 8.4 不理解竞态问题(#58) 8. ...
- 青少年CTF-Crypto(新手版本2.0,无factor1)
凯撒大帝的征讨之路 题目: lnixoa{1x2azz7w8axyva7y1z2320vxy6v97v9a} 知识点:凯撒加密 我的题解: import base64 #shift得出移位多少,移位后 ...
- 在.NET程序中整合微软的Playwright,使用 Playwright 的最佳实践和技巧
Playwright 是一个由 Microsoft 开发的开源工具,用于自动化 Web 浏览器的测试和操作.它提供了一种跨浏览器.跨平台的自动化解决方案,可以在 Chromium.Firefox 和 ...
- C语言趣味编程之抓交通肇事犯
include <stdio.h> main() { int i, j, k, temp;//i,j,k,分别表示前两位车牌号.后两位车牌号和车牌号,temp为验证是否车牌号为某个数的平方 ...
- APISIX的安装和简单使用
APISIX 是一个云原生.高性能.可扩展的微服务 API 网关. 它是基于 Nginx 和 etcd 来实现,和传统 API 网关相比,APISIX 具备动态路由和插件热加载,特别适合微服务体系下的 ...