ajax学习笔记

作者: wangzaiplus | 来源:发表于2017-07-08 18:39 被阅读0次

ajax学习笔记
2018-06-01
AJAX的基础使用与封装
AJAX学习笔记
Ajax学习笔记
AJAX学习笔记
Ajax学习笔记
Ajax学习笔记
ajax学习笔记
Ajax学习笔记

%1.AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
2.AJAX 工作原理
browser: server
XMLHttpRequest object create response
send HttpRequest ---> Internet ---> send data to browser
using js to process returned data
update page content <--- Internet <---

3.XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)
4.XMLHttpRequest 对象:用于在后台与服务器交换数据
1).创建 XMLHttpRequest 对象
语法:variable=new XMLHttpRequest();
variable=new ActiveXObject("Microsoft.XMLHTTP");(老版本,ie5,ie6)
检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2).向服务器发送请求请求: open() 和 send() 方法
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string):将请求发送到服务器。
string：仅用于 POST 请求

5.实例:
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
6.服务器响应
如需获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
7.onreadystatechange 事件
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status
200: "OK"
404: 未找到页面
8.当 readyState 等于 4 且状态为 200 时，表示响应已就绪

1.HTTP请求:
请求方法 get/post 请求地址 url
请求头客户端环境信息等
空行
请求体请求正文表单信息,字符串信息,参数等
2.get:用于信息获取使用url传参
post:用于修改服务器资源
3.HTTP响应:
状态码
响应头服务器信息
空行
响应体响应正文
4.状态码:
200 OK
404 客户端错误,不存在
500 服务器错误
5.XMLHttpRequest
open(method,url,async)
method get/post
url 请求路径
async 是否异步,一般为true
send(string)
string 请求参数
当get时,不需要填
当post时,填写参数
常用方式:
①request.open("get","login.jsp",true);
request.send();

    ②request.open("get","login.jsp",true);
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");<!--一定要-->
    request.send("naem=tom&password=123");

6.XMLHttpRequest取得响应
responseText
responseXML
status 数字形式返回http状态码
statusText 文本形式返回http状态码

readyState属性
    0 请求未初始化 open()还没调用
    1 服务器建立连接,open()调用了
    2 请求已接收
    3 请求处理中
    4 请求完成,响应完成

var request = new XMLHttpRequest();
request.open("get","login.jsp",true);
request.send();
request.onreadyStateChange = function(){
    if(request.readyState==4&&request.status==200){
        //request.responseText...
    }
}

7.JSON:JavaScript对象表示法,JavaScript Object Notation
8.解析JSON:
1)eval() 不建议使用,不安全
例:
var data = '{"student":[
{"name":"a","sex":"male"},{"name":"a","sex":"male"},{"name":"a","sex":"male"}
]}';
var obj = eval('('+ data +')');
alert(obj.student[0].name);
2)JSON.parse() 默认使用parse方法解析
例:
var data = '{"student":[
{"name":"a","sex":"male"},{"name":"a","sex":"male"},{"name":"a","sex":"male"}
]}';
var obj = JSON.parse(data);
alert(obj.student[0].name);

9.用jQuery实现ajax:
jQuery.ajax([settings])
type get/post
url 请求地址
dataType 服务器返回的数据类型,比如"json",默认智能解析
data 一个对象,连同请求发送到服务器的数据(post)
success 一个方法,请求成功后的回调函数
error 一个方法,请求失败时调用
10.例:
$(function(){
$("#login").click(function(){
$.ajax({
type:"get",
url:"login.jsp?name="+$("#name").val(),
dataType:"json",
success:function(data){//data:服务返回的数据
if(data.success){
$("#result").html(data.msg);
}else{
$("#result").html("错误:"+data.msg);
}
},
error:function(jqXHR){
alert("错误:"+jqXHR.status);
}
});
});
}); //data:{
name:${"#name"}.val(),
sex:${"#sex"}.val(),
},