Ajax\创建ajax实例

6.1
通信协议（TCP/IP  HTTP等） 计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则。 Cookie 存储在用户本地终端的数据 Cookie增删改查，例：一周内免登录，浏览商品记录 Cookie封装，购物车应用 <?php
//直接输出文本
/*** 多行注释* * */
echo "hello PHP";
echo "<h1>这是一个标题</h1>";
$str = <<<EOD
<h1>hhh</h1>
<p>ppp</p>
<p>ppp</p>
EOD;
echo $str;?><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><?phpecho "前后端不分离";?><script>alert("hello");</script>
</body>
</html><?php
$flag = true;
$num = 10.11;
$arr = [1,2,3];
class Person{}
$person = new Person();
//var_dump($person);
//var_dump($arr);
//var_dump($num);
//var_dump($flag); //js console.log()//var_dump(10+20);if(10){echo "hello";
}
for($i = 0; $i < 10; $i++){echo $i."<br>";//. php里字符串拼接
}
function foo($x,$y){$sum = $x + $y;echo $sum;
}
foo(10,20);?><form action="04_preVar.php" method="post">用户名:<input type="text" name="user" /> 密码:<inputtype="password"name="psw"/><input type="submit" value="提交" /></form><?php
//var_dump($_SERVER);
//$_GET里保存了前端发出get请求时所附加的信息
//$_POST里保存了前端发出post请求时所附加的信息
/* $username = $_GET["user"];
$psw = $_GET["psw"]; */
$username = $_POST["user"];
$psw = $_POST["psw"];echo "用户名为".$username."密码为".$psw;
echo "取到之后就可以进行数据库的查询操作";
?><?php
//掌握
$arr = [1,2,3];
//var obj = {a:1,b:2};
$arr1 = ["a"=>1,"b"=>2];//带索引的数组
//var_dump($arr1);
echo $arr1["a"];//通过索引（键名）访问值
$arr2 = [[1,2],[3,4]];//了解
/* $a = "abc";
$b = "123";
//key=>value
$arr3 = compact("a","b");var_dump($arr3); */$a = [1,2,3];
$b = ["a","b","c"];$arr4 = array_combine($a,$b);var_dump($arr4);$arr5 = range(0,10,2);var_dump($arr5);?><?php
//访问这个页面，我们需要得到的数据是数组[1,2,3]
//$arr1 = [1,2,3];
//$arr1 = ["a"=>1,"b"=>2];
//$arr1 = [["a"=>1],["b"=>2]];
//将php里的数组转换成json格式的字符串
//$json = json_encode($arr1);
//通过echo向前端（浏览器）响应json数据
//echo $json;$str = '{"a":1}';var_dump(json_decode($str,true));?><?php$str_browser_language = !empty($_SERVER['HTTP_ACCEPT_LANGUAGE']) ? strtok(strip_tags($_SERVER['HTTP_ACCEPT_LANGUAGE']), ',') : '';$str_browser_language = !empty($_GET['language']) ? $_GET['language'] : $str_browser_language;switch (substr($str_browser_language, 0,2)){case 'de':$str_language = 'de';break;case 'en':$str_language = 'en';break;default:$str_language = 'en';}$arr_available_languages = array();$arr_available_languages[] = array('str_name' => 'English', 'str_token' => 'en');$arr_available_languages[] = array('str_name' => 'Deutsch', 'str_token' => 'de');$str_available_languages = (string) '';foreach ($arr_available_languages as $arr_language){if ($arr_language['str_token'] !== $str_language){$str_available_languages .= '<a href="'.strip_tags($_SERVER['PHP_SELF']).'?language='.$arr_language['str_token'].'" lang="'.$arr_language['str_token'].'" xml:lang="'.$arr_language['str_token'].'" hreflang="'.$arr_language['str_token'].'">'.$arr_language['str_name'].'</a> | ';}}$str_available_languages = substr($str_available_languages, 0, -3);
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="<?php echo $str_language; ?>" xml:lang="<?php echo $str_language; ?>">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MAMP PRO</title>
<style type="text/css">body {font-family: Arial, Helvetica, sans-serif;font-size: .9em;color: #000000;background-color: #FFFFFF;margin: 0;padding: 10px 20px 20px 20px;}samp {font-size: 1.3em;}a {color: #000000;background-color: #FFFFFF;}sup a {text-decoration: none;}hr {margin-left: 90px;height: 1px;color: #000000;background-color: #000000;border: none;}#logo {margin-bottom: 10px;margin-left: 28px;}.text {width: 80%;margin-left: 90px;line-height: 140%;}
</style>
</head><body><p><img src="MAMP-PRO-Logo.png" id="logo" alt="MAMP PRO Logo" width="250" height="49" /></p><?php if ($str_language == 'de'): ?><p class="text"><strong>Der virtuelle <span lang="en" xml:lang="en">Host</span> wurde erfolgreich eingerichtet.</strong></p><p class="text">Wenn Sie diese Seite sehen, dann bedeutet dies, dass der neue virtuelle <span lang="en" xml:lang="en">Host</span> erfolgreich eingerichtet wurde. Sie können jetzt Ihren <span lang="en" xml:lang="en">Web</span>-Inhalt hinzufügen, diese Platzhalter-Seite<sup><a href="#footnote_1">1</a></sup> sollten Sie ersetzen <abbr title="beziehungsweise">bzw.</abbr> löschen.</p><p class="text">Server-Name: <samp><?php echo $_SERVER['SERVER_NAME']; ?></samp><br />Document-Root: <samp><?php echo $_SERVER['DOCUMENT_ROOT']; ?></samp><br />Protokoll: <samp><?phpif (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') {echo 'https';} else {echo 'http';}?></samp></p><p class="text" id="footnote_1"><small><sup>1</sup> Dateien: <samp>index.php</samp> und <samp>MAMP-PRO-Logo.png</samp></small></p><hr /><p class="text">This page in: <?php echo $str_available_languages; ?></p><?php elseif ($str_language == 'en'): ?><p class="text"><strong>The virtual host was set up successfully.</strong></p><p class="text">If you can see this page, your new virtual host was set up successfully. Now, web content can be added and this placeholder page<sup><a href="#footnote_1">1</a></sup> should be replaced or deleted.</p><p class="text">Server name: <samp><?php echo $_SERVER['SERVER_NAME']; ?></samp><br />Document root: <samp><?php echo $_SERVER['DOCUMENT_ROOT']; ?></samp><br />Protocol: <samp><?phpif (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') {echo 'https';} else {echo 'http';}?></samp></p><p class="text" id="footnote_1"><small><sup>1</sup> Files: <samp>index.php</samp> and <samp>MAMP-PRO-Logo.png</samp></small></p><hr /><p class="text">Diese Seite auf: <?php echo $str_available_languages; ?></p><?php endif; ?></body>
</html><script>//操作数console.log(2 || 1);console.log(true || 1);var a = 10;console.log(a++);console.log(++a);console.log(0.1 + 0.2);console.log(Number(" "), Number(""));console.log(Boolean(""), Boolean(" "));</script>6.2
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>购物车页面</title><style>img {width: 30px;height: 30px;}</style></head><body><ul id="cartList"></ul><script src="../cookie.js"></script><script>let oUl = document.getElementById("cartList");let productDatas = JSON.parse(getCookie("productDatas"));if (getCookie("cartDatas")) {var cartDatas = JSON.parse(getCookie("cartDatas"));let str = "";for (var id in cartDatas) {for (var i = 0; i < productDatas.length; i++) {if (id == productDatas[i].id) {str += `<li><img src="${productDatas[i].imgsrc}"><span>${productDatas[i].title}</span><span>${cartDatas[id]}</span></li>`;}}}oUl.innerHTML = str;} else {oUl.innerHTML = "购物车里什么都没有，快去抢购吧";}</script></body>
</html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>商品列表</title><style>ul,li,p {padding: 0;margin: 0;}img {display: block;border: none;}#prodList li {list-style: none;float: left;margin: 10px;width: 220px;padding: 10px;border: 1px solid #cecece;}#prodList li p {margin: 10px 0;}#prodList li input {border: none;width: 120px;height: 40px;background-color: red;color: white;}</style></head><body><a href="cartList.html">购物车</a><div><ul id="prodList"><li><img src="1.jpg" /><p>商品标题</p><p>价格</p><input type="button" value="加入购物车" /></li><li><img src="2.jpg" /><p>商品标题</p><p>价格</p><input type="button" value="加入购物车" /></li><li><img src="3.jpg" /><p>商品标题</p><p>价格</p><input type="button" value="加入购物车" /></li></ul></div><script src="../cookie.js"></script><script>//商品列表里的数据 实际上 来源数据库，但是现在没有数据库，从cookie里面取数据，在取之前得先把数据塞到cookie里//考虑一个问题  数据是什么样的//一件商品信息{id:10001,title:"四件套",price:100,imgsrc:"1.jpg"}//三件商品信息/* let productDatas = [{ id: 10001, title: "四件套", price: 100, imgsrc: "1.jpg" },{ id: 10002, title: "四件套", price: 200, imgsrc: "2.jpg" },{ id: 10003, title: "四件套", price: 300, imgsrc: "3.jpg" },]; *///在正式工作之前，先把数据存到cookie里/* setCookie("productDatas", JSON.stringify(productDatas), 7); *///1.从cookie里去数据，展示到页面let productDatas = JSON.parse(getCookie("productDatas"));let oUl = document.getElementById("prodList");let str = "";productDatas.forEach((item) => {str += `<li><img src="${item.imgsrc}" /><p>${item.title}</p><p>${item.price}</p><input type="button" class="addBtn" data-id="${item.id}" value="加入购物车" /></li>`;});oUl.innerHTML = str;//2.加入购物车 存数据 {10001:1,10002:5,10003:2}//let cartDatas = {};if (getCookie("cartDatas")) {var cartDatas = JSON.parse(getCookie("cartDatas"));} else {var cartDatas = {};}let aBtns = document.querySelectorAll(".addBtn");for (let i = 0; i < aBtns.length; i++) {aBtns[i].onclick = function () {let id = this.getAttribute("data-id");//不同id，增属性，相同id，增数量if (cartDatas[id] == undefined) {cartDatas[id] = 1;} else {cartDatas[id]++;}console.log(cartDatas);setCookie("cartDatas", JSON.stringify(cartDatas), 7);};}</script></body>
</html><body>用户名:<input type="text" /><br />密码:<input type="password" /><br /><input type="checkbox" />七天免登录<br /><input type="button" value="登录" /><script src="cookie.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.js"></script><script>//点击登录按钮时，判断复选框是否选中，如果选中，把用户名和密码存起来，存哪儿，存cookielet aInput = document.querySelectorAll("input");aInput[3].onclick = function () {if (aInput[2].checked) {setCookie("username", aInput[0].value, 7);setCookie("password", md5(aInput[1].value), 7);} else {removeCookie("username");removeCookie("password");}};//存cookie是为了什么，是为了下次打开登录页面时用户名和密码自动填充到文本框里if (getCookie("username")) {aInput[0].value = getCookie("username");aInput[1].value = getCookie("password");aInput[2].checked = true;}</script></body>网络通信中七层模型 ISO -> OSI/RM 物理层数据链路层网络层 IP传输层 TCP 三次握手会话层表示层应用层 HTTP超文本传输协议 无状态协议TCP/IP 四层参考模型网络接口层网络层传输层应用层//cookie 存储在用户本地终端的数据//增删改查//1. 添加cookie 默认路径 在当前目录下 默认有效期 浏览器存续期间/* document.cookie = "username=yanxingyu"; *///2.设置cookie的有效期和路径//2.1 expires/* let oDate = new Date();//7天之后的日期oDate.setDate(oDate.getDate() + 7);document.cookie = "username=duanfanchao;expires=" + oDate; *///2.2 路径设置/* let oDate = new Date();oDate.setDate(oDate.getDate() + 7);document.cookie = "username=duanfanchao;expires=" + oDate + ";path=/"; *///2.3 同名cookie会覆盖/* document.cookie = "user=aaa";document.cookie = "user=bbb"; *///2.4 cookie大小在4k左右，cookie条数在170条左右/* for (var i = 0; i < 200; i++) {document.cookie = i + "=a" + i;} *///取cookie//console.log(document.cookie);//取到所有的cookie//取单个cookie的值，这也是一般使用的情形/* let strCookie = document.cookie;let arrCookie = strCookie.split("; ");//console.log(arrCookie);for (var i = 0; i < arrCookie.length; i++) {let arr = arrCookie[i].split("=");if (arr[0] == "198") {console.log(arr[1]);}} *///删除cookie/* let oDate = new Date();oDate.setDate(oDate.getDate() - 7);document.cookie = "194=111;expires=" + oDate; *///cookie存值和取值 都是字符串document.cookie = "data=111";let data = { a: 1, b: 2 };document.cookie = "data=" + data;//如果存的值是一个JSON对象就要提前转成json字符串  需要通过JSON.stringify()//如果取的值是一个json字符串，需要用JSON.parse()转成json对象进行进一步处理console.log(JSON.stringify({ a: 1 }));console.log(JSON.parse('{"a":1}'));function setCookie(name, val, n) {let oDate = new Date();oDate.setDate(oDate.getDate() + n);document.cookie = name + "=" + escape(val) + ";expires=" + oDate;
}
function getCookie(name) {let strCookie = document.cookie;let arrCookie = strCookie.split("; ");for (let i = 0; i < arrCookie.length; i++) {let arr = arrCookie[i].split("=");if (arr[0] == name) {return unescape(arr[1]);}}
}
function removeCookie(name) {setCookie(name, 1, -1);
}<script>//封装函数时考虑的要素 1.功能 2.参数 3.返回值//增加和修改//name表示cookie名，val表示cookie值，n表示n天后过期function setCookie(name, val, n) {let oDate = new Date();oDate.setDate(oDate.getDate() + n);document.cookie = name + "=" + escape(val) + ";expires=" + oDate;}setCookie("username", "admin", 7);setCookie("name", "刘枫", 7);//获取function getCookie(name) {let strCookie = document.cookie;let arrCookie = strCookie.split("; ");for (let i = 0; i < arrCookie.length; i++) {let arr = arrCookie[i].split("=");if (arr[0] == name) {return unescape(arr[1]);}}}console.log(getCookie("username"));console.log(getCookie("name"));//删除function removeCookie(name) {setCookie(name, 1, -1);}removeCookie("username");removeCookie("data");</script><script>console.log(escape("贾德祯"));console.log(unescape("%u8D3E%u5FB7%u796F"));document.cookie = "username=假的真";console.log(escape("abc"));console.log(unescape());document.cookie="username=ABC";</script># 连接数据库服务器1. 通过 wamp/mamp/phpstudy 等软件自带的 phpMyadmin 来进行
2. 输入用户名和密码链接数据库服务器，用户名默认为 root，密码默认为 root 或者空
3. 创建数据库（database）
4. 创建数据表（table）
5. 创建字段
6. 插入数据（记录）
7. 数据的增删改查### 主键 一个表里只允许一个主键，主键的值唯一<?php
$conn = new mysqli("localhost","root","root");
if($conn->connect_error){die("数据库连接失败".$conn->connect_error);
}echo "数据库连接成功";
?><?php
//include include_once  require  require_once
//引入conn文件
include_once("conn.php"); //创建数据库，使用SQL语句
$sql = "create database myDB";
//执行sql语句
if($conn->query($sql)){echo "数据库创建成功";
}else{echo "数据库创建失败".$conn->error;
}
?><?php
include "conn.php";
//选择数据库
$conn->select_db("myDB");
//SQL语句创建表
$sql = "CREATE TABLE MyGuests (id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,firstname VARCHAR(30) NOT NULL,lastname VARCHAR(30) NOT NULL,email VARCHAR(50),reg_date TIMESTAMP
)";
//执行SQL语句 if($conn->query($sql)){echo "数据表创建成功";
}?><?php
include "conn.php";
//选择数据库
$conn->select_db("myDB");
//SQL语句 删除数据
$sql = "delete from myguests where id = 1";
//执行插入
if($conn->query($sql)){}else{echo $conn->error;
}?><?php
include "conn.php";
//选择数据库
$conn->select_db("myDB");
//SQL语句 插入数据
$sql = "insert into myguests (firstname,lastname,email) values('张','翔云','zxy@163.com')";
//执行插入
$conn->query($sql);?><?php
include "conn.php";
//选择数据库
$conn->select_db("myDB");
//SQL语句 插入数据
$sql = "insert into myguests (firstname,lastname,email) values('张','翔云','zxy@163.com'),('zhang','jingpu','zjp@163.com')";
//执行插入
$conn->query($sql);?><?php
include "conn.php";
//选择数据库
$conn->select_db("myDB");
//SQL语句 取表里完整的数据
//$sql = "select * from myguests";
//取表里某些特定字段的值
/* $sql = "select firstname,lastname from myguests"; */
//根据条件取数据
/* $sql = "select * from myguests where id > 2"; */
//排序
$sql = "select * from myguests order by id desc";
//执行之后，保存查询结果
$result = $conn->query($sql);
if($result->num_rows>0){while($row = $result->fetch_assoc()){//echo $row["lastname"];//var_dump($row);echo $row["id"];}
}?><?php
include "conn.php";
//选择数据库
$conn->select_db("myDB");
//SQL语句 更新数据
/* $sql = "update myguests set firstname='shi' where id = 1"; */
$sql = "update myguests set firstname='shi'";
//执行插入
if($conn->query($sql)){}else{echo $conn->error;
}?>6.3
Ajax，是 Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的技术。 通过异步模式，提升了用户体验。优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大量用户下的服务器负载。 Ajax最大的特点就是局部刷新。 Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR) 创建Ajax对象     new XMLHttpRequest();      new ActiveXObject('Microsoft.XMLHTTP')     //IE6
open() xhr.open('get', 'demo.php', true); //对于 demo.php 的 get 请求，false 同步 三个参数： 要发送的请求类型   (get 、post)、请求的 URL 和表示是否异步 Post：xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send(data); 发送请求      send()       接收服务器返回的信息        onreadystatechange readyState 0  请求未初始化    1 服务器连接己建立 2  请求已接收 3 处理请求，响应中 4  响应就绪
status         HTTP 状态码 常见状态码 200 - 请求成功 301 -Moved Permanently 资源（网页等）被永久转移到其它URL 304 -Not Modified 使用缓存文档 404 - 请求的资源（网页等）不存在 500 - 内部服务器错误 状态码分类 1**信息，服务器收到请求，需要请求者继续执行操作 2**成功，操作被成功接收并处理 3**重定向，需要进一步的操作以完成请求 4**客户端错误，请求包含语法错误或无法完成请求 5**服务器错误，服务器在处理请求的过程中发生了错误
回调函数 作为一个函数的参数的进行传递，并在函数内部通过指针进行调用的函数   编写PHP服务端接口    //A//阻塞 非阻塞  同步 异步//同步：//异步：//J//X//优势：局部刷新/* <person><name>huliangliang</name><age>20</age></person>{name:"hliangliange",age:20}<script>//1.创建ajax实例/* var xhr = new XMLHttpRequest();var xhr = new ActiveXObject("Microsoft.XMLHTTP"); *///兼容性if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();} else {var xhr = new ActiveXObject("Microsoft.XMLHTTP");}//2.准备工作 请求数据  接口url 请求类型typexhr.open("get", "data.json", true);//3.发送请求xhr.send();//4.取响应数据xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {//数据过来之后，如何处理，是根据需要来定，可能需要1行代码实现，也可能很多很多行代码实现console.log(xhr.responseText);} else {console.log("加载失败，请重试");}}};</script>
data json
//只针对于get请求function ajax(url, fnSuccess, fnError) {if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();} else {var xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open("get", url);xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {var data = xhr.responseText;fnSuccess(data);} else {fnError();}}};}
Ajax.js
function ajax(url, fnSuccess, fnError) {if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();} else {var xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open("get", url);xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {var data = xhr.responseText;fnSuccess(data);} else {fnError();}}};
}<body><ul></ul><script src="ajax.js"></script><script>var oUl = document.querySelector("ul");ajax("data.json", foo, bar);//成功时的处理函数foofunction foo(a) {a = JSON.parse(a);var str = "";for (var i = 0; i < a.length; i++) {str += `<li>${a[i]}</li>`;}oUl.innerHTML = str;}function bar() {alert("失败了");}</script></body><body><input type="text" name="username" /><input type="button" value="提交" /><script>var aInput = document.querySelectorAll("input");aInput[1].onclick = function () {//1.创建ajax实例/* var xhr = new XMLHttpRequest();var xhr = new ActiveXObject("Microsoft.XMLHTTP"); *///兼容性if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();} else {var xhr = new ActiveXObject("Microsoft.XMLHTTP");}//2.准备工作 请求数据  接口url 请求类型typexhr.open("post", "05_test.php", true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//3.发送请求xhr.send("username=" + aInput[0].value);//4.取响应数据xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {//数据过来之后，如何处理，是根据需要来定，可能需要1行代码实现，也可能很多很多行代码实现console.log(xhr.responseText);} else {console.log("加载失败，请重试");}}};};</script></body><?php
//echo "123";
$name = $_POST["username"];
echo "hello".$name;
?>//1.既能适应get请求也能适应post请求//2.既能处理不带数据的请求也能处理附加数据的请求/* 参数：type 请求方式 get/post 必传url 请求地址  必传data 附加的数据（向后台传递的数据）success 请求成功时的回调函数 必传error 请求失败时的回调函数*///向服务端发送get请求，如果需要附加数据，这个数据放到url后面 demo.php?username=aaa&password=111//向服务端发送post请求，如果需要附加数据，这个数据放到请求体里，具体体现在xhr.send('username=aaa&password=111');//{username:"aaa",password:1111}function ajax(type, url, data, success, error) {// 注意 无论是get还是post 都有相同部分代码if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();} else {var xhr = new ActiveXObject("Microsoft.XMLHTTP");}//将{username:"aaa",password:111}变成username=aaa&password=111var str = "";for (var i in data) {str += i + "=" + data[i] + "&";}//将结尾的&替换成空字符str = str.replace(/&$/, "");//在不同的地方加判断if (type == "get") {xhr.open("get", url + "?" + str);xhr.send();}if ((type = "post")) {xhr.open("post", url);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send(str);}xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {var data = xhr.responseText;success(data);} else {error();}}};}function ajax(obj) {// 注意 无论是get还是post 都有相同部分代码if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();} else {var xhr = new ActiveXObject("Microsoft.XMLHTTP");}//将{username:"aaa",password:111}变成username=aaa&password=111var str = "";for (var i in obj.data) {str += i + "=" + obj.data[i] + "&";}//将结尾的&替换成空字符str = str.replace(/&$/, "");//在不同的地方加判断//toLowerCase()将字母转小写toUpperCase()将字母转大写if (obj.type.toLowerCase() == "get") {if (str == "") {xhr.open("get", obj.url);} else {xhr.open("get", obj.url + "?" + str);}xhr.send();}if (obj.type.toLowerCase() == "post") {xhr.open("post", obj.url);xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xhr.send(str);}xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {var data = xhr.responseText;obj.success(data);} else {if (obj.error) {obj.error();}}}};
}6.4
Ajax\创建ajax实例相关推荐

ajax简单实例代码,分享Ajax创建简单实例代码
XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分内容而 ...
ajax入门实例代码,AJAX、AJAX实例及AJAX源代码
AJAX.AJAX实例及AJAX源代码作者:佚名来源:CNZZ 2008-1-4 AJAX介绍 AJAX 关键词: JavaScript脚本和可扩展标记语言(XML) WEB浏览器技术开放式WE ...
javascript 创建ajax函数四部曲
开门见山简要的来写一个ajax函数,方便要用到ajax的时候来调用,下面附:获取 json 数据一个小实例,请在服务器下执行... 创建一个 ajax.js 文件把ajax函数代码放进去 //创建 ...
【AJAX】AJAX技术详细解析以及实例
Ajax技术介绍: 全称: Asynchronized(异步) JavaScript And Xml 技术组成有: Javascript.DOM.CSS 和 XMLHttpRequest AJAX ...
$.ajax实例详解,Ajax与$.ajax实例详解
这次给大家带来Ajax与$.ajax实例详解,Ajax与$.ajax使用的注意事项有哪些,下面就是实战案例,一起来看一下. 实例一(Ajax请求基本创建格式): Ajax练习(GET,不考虑浏览器兼容 ...
【AJAX】AJAX 实例
AJAX 实例为了帮助您理解 AJAX 的工作原理,我们创建了一个小型的 AJAX 应用程序: 实例使用 AJAX 修改该文本内容修改内容 AJAX 实例解析上面的 AJAX 应用程序包含一个 ...
ajax常用案例,Ajax和$.ajax使用实例详解(推荐)
实例一(Ajax请求基本创建格式): Ajax练习(GET,不考虑浏览器兼容性) function doRequest() { //不考虑浏览器兼容性问题 var xmlHttp = new XMLH ...
PHP rss聚合,利用PHP和AJAX创建RSS聚合器
下载本文示例代码想象使用一个简单HTML文件来把一个请求发送到一个服务器端脚本,收到一个基于该请求的定制XML文件,然后把它显示给用户而几乎不需要刷新浏览器!本文作者将同你一起探讨怎样在普通Web应 ...
php页面get方法实现ajax，入门实例教程
ajax,入门实例教程本例针对php页面,做了一个小的demo加深对ajax的理解 1.文档结构: 共有ajax.php 和action.php 2个页面. 2.源码如下: /*ajax.php页面 ...
Ajax\创建ajax实例

Ajax\创建ajax实例相关推荐

最新文章

热门文章
