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('出错了: 错误信息'+msg+' 错误url'+url+' 出错位置'+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('出错了: 错误信息:'+msg+' 错误文档:'+url+' 出错位置'+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>