AJAX
1：代码主要简单的了解AJAX，AJAX并不是一个新技术，他的作用是减少服务器的负压，同时也在一定程度上满足客户在速度上的要求，
AJAX可以实现局部刷新，而不需要重新加载整个页面，比如iframe标签，可以加载其他页面。
<!DOCTYPE html>
<html>
<head>
<title>AJAX</title>
</head>
<script type="text/javascript">
/*
var a = {deng:'very good',
s:function(){
console.log('you are very good');
}}
var v = new Object({c:'dengzao'});
a.rub = function test(){
console.log('执行引用test函数');
console.log(v.c);
}
a.rub();
a.s();
*/
window.onerror = function(msg,url,line)
{
alert('出错了:\n错误信息'+msg+'\n错误url'+url+'\n出错位置'+line)
}
var xhr = new XMLHttpRequest() //创建XMLHttpRequest对象.
//方式2:var xhr = new XMLHttpRequest()
xhr.onreadystatechange= function() //设置readystatechange事件处理函数
/*
readystate属性返回AJAX请求处理状态.
0:请求未初始化
1:服务器连接已建立
2:请求已接受
3:请求处理中
4:请求已完成.
*/
{
console.log(xhr.responseText); //这个部分要等到发送请求后才会有效.
var xh = xhr.responseText;
console.log(xhr.status);//status返回服务器处理HTTP请求的状态码200表示已成功处理.202:请求已接受但未成功处理,400:错误的请求.404:文件未找到,408:请求超时.
console.log(xhr.readystate);
//console.log(xhr.responseXML);
}
//open('method','url',asyn,'username','password')
//asyn:为true即为同步,或false为异步.
xhr.open("GET","https://api.heweather.net/s6/weather/now?location=beijing&key=3846ae59ad0947079d644a184a062a71"
);
//xhr.open("GET","E:/Program Files/Sublime Text 3/a.txt");
//设置请求头
//xhr.setRequestHeader('deng-zhao','text/plain',charset='UTF-8')
//getRequestHeader()方法返回服务器响应的HTTP头参数
//var ctype = xhr.getAllRequestHeaders();
//xhr.abort() 用于停止当前异步请求.
//console.log(ctype);
var c = xhr.send() //发送请求.
var str1 = '{ "name": "cxh", "sex": "man" }';
//var obj = eval('(' + str + ')');
//var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
var obj = JSON.parse(str1); //由JSON字符串转换为JSON对象
//JSON对象:var str2 = { "name": "cxh", "sex": "man" };
alert(obj.name);
//JSON数组
var str='[{"name":"cxh","sex":"man"},{"name":"cxh1","sex":"man1"}]';
var obj1 = JSON.parse(str);
console.log(obj1);
console.log(obj1[0].name)
</script>
<body>
</body>
</html>
2:ajax:
<!DOCTYPE html> <html> <head> <title>HTTP请求</title> </head> <script type="text/javascript"> /* 【重点知识】 *:使用AJAX完成HTTP请求. *:使用<script>完成HTTP请求. */ var myDiv = document.getElementById('myDiv') window.onerror = function (msg,url,line) //处理脚本错误 { alert('出错了:\n错误信息:'+msg+'\n错误文档:'+url+'\n出错位置'+line) } //创建XMLHTTP因不同的浏览器会使用不同的构造函数来创建 function getXMLHttpRequest() { var xhr; if(window.getXMLHttpRequest) { //使用new调用构造函数,从而创建HTTP请求对象 //Edge、IE、Firefox、Chrome、Safari及Opera等浏览器均支持调用内置的XMLHttpRequest()函数来创建XMLHttpRequest对象。 xhr = new XMLHttpRequest() // //return xhr; } else if(window.ActiveXObject){ try{ //早期的IE（IE 5和IE 6）使用ActiveX 对象来代替XMLHttpRequest对象 xhr = new ActiveXObject('Msxml2.XMLHTTP') }catch(e){ try{ xhr = new ActiveXObject('Microsoft.XMLHTTP') //return xhr; }catch(e){console.log(e);} } } if (xhr) return xhr; else return false; } function doAjaxRequest() { var xhr = getXMLHttpRequest(); if(!xhr) //!非运算符,当xhr为false时条件成立. { alert('你使用的浏览器不支持AJAX,请使用Edge,IE,Firefox,Chrome'); return 0; } //onreadystatechange：该属性用于设置readystatechange事件处理函数 //readystate属性发生改变时会产生readystatechange事件，JavaScript调用事件处理函数处理响应。 xhr.onreadystatechange = function() //事件处理函数 { nodel = document.createElement('div') //创建div标签 nodel.textContent = 'readyState = '+xhr.readyState+'status'+xhr.status myDiv.appendChild(node) //添加子结点 //status属性值在执行send()方法时发送了HTTP请求，获得服务器返回的响应后才有意义。 if(xhr.readyState == 4 && xhr.status == 200) { nodel = document.createElement('div'); nodel.textContent = '响应结果='+xhr.responseText; myDiv.appendChild(node); nodel.textContent = '响应头:'+xhr.getAlResponseHeaders(); myDiv.appendChild(nodel); } xhr.open('GET','ajaxtext.txt'); xhr.send(); xhr.abort(); } </script> <body> <div id = 'myDiv' ></div> <button onclick= doAjaxRequest() >发起AJAX请求</button> </body> </html>
3:ajax的概念:
<!DOCTYPE html> <html> <head> <title>ajax</title> </head> <script type="text/javascript"> /*1:ajac可以接受什么信息: 浏览器可以接受的信息ajax都可以接受,例如html标签,css样式内容,xml内容,json内容等. */ /* XMLHttpRequest对象属性: onreadstatechange:指定在readState属性改变的时候执行该属性, readyState:有5种取值,即5种状态. status:HTTP状态码对用的文本 responseXML:服务器的响应后，表现为一个xml格式. */ function f1(){ //真实名字为XMLHttpRequest()的 //xhr为ajax实例对象 if(typeof XMLHttpRequest != 'undefined'){ var xhr = new XMLHttpRequest(); //ajax为笔名 xhr.open('get','https://api.heweather.net/s6/weather/now?location=beijing&key=3846ae59ad0947079d644a184a062a71'); //打开服务器d端的URL /*2:xhr实例对象的方法: abort()取消HTTP请求, getAllResponseHeader()返回HTTP响应的首部信息. open(mode,url,asyncFlag,username,password)方法: asyncFlag:true表示异步请求,默认为true. url:请求地址 */ //如果是post请求;则send(post请求数据/get设置null); xhr.send(null); console.log(xhr); }else { var xhr = new ActiveXObject('Microsoft.XMLHTTP'); var xhr = new ActiveXObject('Msxml2.XMLHTTP'); var xhr = new ActiveXObject('Microsoft.XMLHTTP.3.0'); //升级 var xhr = new ActiveXObject('Microsoft.XMLHTTP.6.0'); alert(xhr) } } </script> <body> <input id = "input" type="button" name="" value="触发" onclick="f1()"/> </body> </html>
4:jquery中的ajax之load方法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态伪类</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> </head> <script> /*jQuery提供load()方法可通过AJAX请求来获取服务器数据,并将其显示在页面*/ $(function() { $('#btn').click(function() { // $.ajax(''); var jason_s = $('.p').load('https://api.heweather.net/s6/weather/now?location=beijing&key=3846ae59ad0947079d644a184a062a71') //响应的数据:{"HeWeather6":[{"status":"permission denied"}]} var json_s1 = $('.p').load('a.txt') //请求本地服务器数据. }) }) </script> <style type="text/css"> </style> <body> <button id="btn" type="button">触发</button> <p class="p"></p> </body> </html>
5：post和get：注意post和get请求方式,在服务器返回过来的响应数据格式是不同的.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态伪类</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> </head> <script> $(function() { $('#btn').click(function() { // $.ajax(''); //客户端向服务器发起请求通常采用GET或POST方式, /* 1:get()方法: jQuery.get(url,data,callback) data:表示向服务器提交的数据, callback:回调函数: function(data,status,xhr){ xhr.status:AJAX发起http请求的返回状态, status:状态码. data:服务器返回给客户端的数据. xhr:执行当前AJAX请求的XMLHTTPRequest对象。 } */ $(function() { $('#btn').click(function() { $.get('https://api.heweather.net/s6/weather/now?location=beijing&key=3846ae59ad0947079d644a184a062a71', { data: '天气怎么样' }, function(data, status, xhr) { msg = "状态码" + xhr.status + '状态' + status + '响应数据' + data $('.p').text(msg); }) }) }) }) }) /* post()方法： jQuery.post(url,data,callback): callback回调函数与get()方法相同. */ </script> <style type="text/css"> </style> <body> <button id="btn" type="button">触发</button> <p class="p"></p> </body> </html>
6:jquery中的getJSON和getScript():
getScript(用于获取服务器端的脚本);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态伪类</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> </head> <script> /* jQuery.getJSON(url,[,data],clallback) 参数和post与get()方法种的还是一样的 */ $(function() { $('#btn').click(function() { $.getJSON('https://api.heweather.net/s6/weather/now?location=beijing&key=3846ae59ad0947079d644a184a062a71', function(data) { var msg = $.each(data, function(key, val) { msg += key + ':' + val + '<br>' $('.p').html(msg) }) }) }) }) </script> <style type="text/css"> </style> <body> <button id="btn" type="button">触发</button> <p class="p"></p> </body> </html>
