来自 前端技术 2019-09-04 19:43 的文章
当前位置: 六合联盟网 > 前端技术 > 正文

ajax详细介绍,javascript常用命令

Javascript是什么? Js是一种轻量级网络脚本语言,用来向html页面添加交互行为。它是一种解释性语言即不需要预编译就能执行。

a.什么是Ajax
    Asynchronous JavaScript and XML(异步JavaScript和XML)
    节省用户操作,时间,提高用户体验,减少数据请求
    传输获取数据
b.使用Ajax:
    使用ajax获取某一文本文件的内容
    
c.Ajax过程详解:
    创建对象XMLHttpRequest()
    Date()对象
    ActiveXObject(‘Microsoft.XMLHTTP’)

Javascript能做什么?①js可以讲动态的变量放入html页面。将js代码放入html代码中执行,如document.write(“<ht>”+name+”</h1>”) 就可以将name变量写入html页面中。②js可以监听事件。如当页面载入完成时或者用户进行鼠标或者键盘操作时,onload,onmousemove,onfocus等事件。③js可以读取且编辑html 的内容,document.getElementById(“nv”).innerHtml=”hello world”,即可改变id为nv组件的html代码。④js可用来验证数据合法性,前台验证(可以简单被绕过)。If(document.getElementById(“name”).length>20) return false; 验证文本长短。⑤js可用来检测访问者的浏览器,根据浏览器的不同来载入相应页面,常用于浏览器的兼容性。navigator.userAgent.toLowerCase().indexOf("firefox") 就检测是否是firefox浏览器。⑥js可用来创建cookie。document.cookie=name+"="+value+expires+"; path=/";

1.例:
<script>
window.onload = function() {
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function() {
        //打开浏览器
        var xhr = new XMLHttpRequest();
        //在地址栏输入地址
        xhr.open('get','1.txt',true);
        //提交
        xhr.send();
        //等待服务器返回内容
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 ) {
                alert( xhr.responseText );
            }
        }
    }
}
</script>
<body>
    <input type="button" value="按钮" id="btn" />
</body>

  如何在html代码中嵌入js?①直接在html代码中<script type="text/javascript">alert(“hello world”);</script>。②调用外部的js文件。<script src=out/helloworld.js></scirpt>,甚至可以调用第三方站点上的js(安全问题)。

2.异常
<script>
    //alert(a);
    try {
        //代码尝试执行这个块中的内容,如果有错误,则会执行catch{},    并且传入错误信息参数
        //alert(a);
        //new throw();
        //throw new Error('错了错了');
    } catch (e) {
        alert(e);
    }
    alert('到这里了');
</script>

常用的js代码

1、 最简单的alert(“hello world”),常用来发送一则消息提醒用户。

图片 1
2、 确认框,confirm(“确认要删除吗?”)
图片 2
3、 提示框,prompt(“文本”,”默认值”)
图片 3
4、 自定义js函数:
<html>
<head>
<script type="text/javascript">
function printHello()
{
alert("hello world");
}
</script>
</head>
<body>
<input type="button" value="click" onclick="printHello()">
</body>
</html>
5、页面事件,js可以监视浏览器事件
Onclick事件,ondbclick(双击事件),onload(页面载入事件),onUnload(关闭页面事件),onfocus(获取焦点事件),onblur(失去焦点事件),onchange(改变事件),onsubmit(提交表单事件),onmouseover(鼠标进入组件事件),onmouseOut(鼠标离开组件事件),onerror(加载文档或者图像失败事件),onkeydown(某个键被按下事件)等。事件常被用在xss渗透中。
6、  字符串处理函数。①字符串长度 name.length即返回name的长度。②indexOf()计算字符串中指定字符第一次出现的位置。③match()用来查找字符串中特定的字符。④replace()替换字符串的一些字符。常用来过滤用户输入的内容。⑤toLowerCase()、toUpperCase()将字符串转换为小、大写。⑥concat()连接两个字符串。⑦slice()提取字符串的片段。
7、  Date函数。var now =new Date();即可新建一个时间对象。①now.getTime()获取从1970年到当前的毫秒数。②setFullYear()设置具体的日期。now.setFullYear(1990,1,1),即可把日期设置为1990年1月1日的当前时间。③toUTCString()将当前日期转化为字符串。Sat, 27 Oct 2012 02:49:24 GMT。④getDay()获取当前是一周中的第几天。类似有getDate, getMonth, getFullYear, getHours, getMinutes(), getSeconds。⑤parse()返回从1970年1月1日到指定日期的毫秒数。
8、 Js Html DOM对象。①window:js中的顶层对象。Window表示浏览器窗口。每当<body>或者<frameset>标签出现时,window对象就被创建。其实前面的一些函数都是这个对象内部的函数,alert,其实全写是window.alert。open()用于打开一个新的浏览器窗口。浏览器窗口。②Navigator:包含客户端浏览器的相关信息,前面判断浏览器的类型就是用它。
图片 4
appCodeName:返回浏览器代码名;appMinorVersion返回浏览器次级版本;appName返回浏览器名称;appVersion返回浏览器平台和版本信息;userAgent返回user-agent头部的值。③Screen包含客户端显示屏的信息。④History包含浏览器访问历史。history.length返回浏览器历史记录的url数量;history.back()加载上一个url(和点击浏览器后退按钮效果一样);history.forward()加载下一个url;history.go()加载指定的url。⑤Location包含当前URL的信息。
图片 5

hash返回从#开始的url;host返回主机名;href完整的url;pathname当前url的路径部分;search返回从? 开始的url部分。Assign()加载指定的文档,reload()重新加载当前文档,replace()用新的文档替换当前文档。

 

有意思的例子

1、  记录键盘动作:
document.onkeypress=function(){window.status+=String.fromCharCode(window.event.keyCode);}

该命令用于将用户在浏览器中的键盘动作保存在window.status中。在浏览器中运行该命令,随便在网页中输入写字符,然后运行命令:window.status,可以看到status中保存了刚才的键盘动作。

2、  IE获取剪切板内容(需要用户允许):
<html>
<body>
<script>
alert(window.clipboardData.getData("text"));      
</script>
</body>
</html>

设置剪切板内容:
window.clipboardData.setData("text","set by javascript");
因为安全问题:firefox和chrome禁用clipboard。
3、  利用JS进行location重定向,钓鱼网站。
Location.href=http:// www.2cto.com
4、  调用本地程序(IE)
<html>
<body>
<script> var o=new ActiveXObject(‘WScript.shell’); o.run(‘cmd.exe’); </script>
</body>
</html>
5、  操作本地文件。
<html>
<body>
<script>
var fso = new ActiveXObject("Scripting.FileSystemObject");
var file1 = fso.CreateTextFile("d:\yeetrack.com.txt",true);
</script>
</body>
</html>
//读取本地文件
<html>
<body>
<script>
if(typeof window.ActiveXObject != 'undefined')
{
var content = "";
try {

var fso = new ActiveXObject("Scripting.FileSystemObject");

var reader = fso.openTextFile("D:\yeetrack.com.txt", 1);

while(!reader.AtEndofStream) {
content += reader.readline();
content += "n";
}
reader.close();
alert(content);
}
catch (e) {
alert("Internet Explore read local file error: n" + e);
}
}
</script>
</body>
</html>

Js是一种轻量级网络脚本语言,用来向html页面添加交互行为。它是一种解释性语言即不需要预编译就能执行。 Javascript能做...

3.异步同步
①<script src="jquery.js"></script>
<script>
//$(function(){})    //阻塞 -> 同步
                    //阻塞:当前面一件事没做完的情况下,阻塞后面代码的执行
                
/*setTimeout(function() {
    alert(1);        //非阻塞 - 异步
}, 2000);           //非阻塞:先弹出2,2s后再弹出1
alert(2);*/

4.请求状态监控
                onreadystatechange事件
                readyState属性:请求状态
                0    (初始化)还没有调用open()方法
                1    (载入)已调用send()方法,正在发送请求
                2    (载入完成)send()方法完成,已收到全部响应内容
                3    (解析)正在解析响应内容
                4    (完成)响应内容解析完成,可以在客户端调用了
                status属性:服务器(请求资源)的状态
                返回的内容
                responseText:返回以文本形式存放的内容
                responseXML:返回XML形式的内容

    window.onload = function() {
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function() {
    (一)//打开浏览器
        /*
            1.创建一个ajax对象
                ie6以下new ActiveXObject('Microsoft.XMLHTTP')
        */
        var xhr = null;
        /*if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }*/
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
    (二)//在地址栏输入地址
        /*
            open方法
            三个参数含义:
                1.打开方式 Form-method
                2.地址 Form-action
                3.是否异步
                    异步(true):非阻塞--> 前面的代码不会影响后面代码的执行
                    同步(false):阻塞--> 前面的代码会影响后面代码的执行
                    同步与异步区别:同步:当后续的代码需要用到前面东西的时候,可以用到同步,
                                    同步模式用的较少,因为可以通过事件回调的形式进行处理
                                    异步:一般情况下,均使用异步,因为不可能为了完成ajax动作,
                                    而把后续代码全部阻止掉
        
        */   //打开方式:get;地址:1.txt;是否异步:异步-->xhr.open('get','1.txt',true);
        xhr.open('get','1.txt',true);
      (三)//提交 发送请求
        
        //Send方法
            发送数据请求,相当于Form的submit

        //alert(1);
        xhr.send();
        
        //alert(1)
        
        //alert( xhr.responseText );
        
     (四)//等待服务器返回内容
            /*
            readyState : ajax工作状态
            responseText(属性) : ajax请求返回的内容就被存放到这个属性下面
            on readystate change : 当状态值readyState改变的时候触发
            status : 服务器状态(码),http状态码
            */
        xhr.onreadystatechange = function() {
            
            if ( xhr.readyState == 4 ) { //当状态值为4时,把内容取出来
                //容错??处理:判断服务器是否成功 2开头的表示成功
                if ( xhr.status == 200 ) {//当状态值OK的时候 执行
                    alert( xhr.responseText );//把内容取出来
                } else {//如果为其他的状态 做一下错误处理,xhr.status:表示错误信息
                    alert('出错了,Err:' + xhr.status);
                }
          }
    }
}
</script>
</head>
<body>
    <input type="button" value="按钮" id="btn" />
</body>
</script>

传递、请求过程中的问题:
    xhr.open('post','2.post.php',true);
        //post方式,数据放在send()里面作为参数传递
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
        //post没有缓存问题
        //无需编码
    xhr.send('username=刘伟&age=30');
获取内容以后应注意的问题:

4.1,表单
    表单:数据的提交,向服务器提交数据,比如:提交用户信息
        action : 数据提交的地址,默认是当前页面
        method : 数据提交的方式,默认是get方式
            1.get--通过url地址传输
                把数据名称和数据值用=连接,如果有多个的话,那么他会把多个数据组合用&进行连接,然后把数据放到url?后面传到指定页面
                传输的数据量:有限制,url长度限制的原因,我们不要通过get方式传递过多的数据
                传递的数据类型:仅为字符串
            2.post--通过浏览器内部传输
                传输的数据量:理论上无限制
                传递的数据类型:可多种
        enctype : 提交的数据格式,默认application/x-www-form-urlencoded
①<body>
    
    <form action="1.get.php" enctype="application/x-www-form-urlencoded">
        <input type="text" name="username" />
        <input type="text" name="age" />
        <input type="submit" value="提交" />
    </form>
</body>

4.2,后端数据接收
    前后台键名和传输方式必须一致
        数据传输方式
        数据获取方式
①后端数据接收--get-$_GET方式 (.php 文件)
               通过URL传递给该脚本的变量的数组
    <?php
        header('content-type:text/html;charset="utf-8"');
        error_reporting(0);

        $username = $_GET['username'];
        $age = $_GET['age'];

        echo "你的名字:{$username},年龄:{$age}";

②<form action="1.post.php" method="post">
        <input type="text" name="username" />
        <input type="text" name="age" />
        <input type="submit" value="提交" />
    </form>
    
②后端数据接收--post-$_POST 方式 (.php 文件)
               通过HTTP POST方法(表单)传递给该脚本的变量的数组
    <?php
        header('content-type:text/html;charset="utf-8"');
        error_reporting(0);
        //$_REQUEST----get post 都可以
        $username = $_POST['username'];
        $age = $_POST['age'];

        echo "你的名字:{$username},年龄:{$age}";

5.json
<script src="JSON.js"></script>
<script>
/*
JSON :
JSON.js文件中有两种方法:
        stringify : 可以把一个对象转成对应字符串
        parse : 可以把字符串转成对应对象
*/
//alert(JSON)
//stringify : 可以把一个对象转成对应字符串

var arr = [1,2,3];
var j = {left:100};
/*alert( JSON.stringify(arr) );*/
/*alert( JSON.stringify(j) );*/

//parse : 可以把字符串转成对应对象
var s1 = '[100,200,300]';
var a1 = JSON.parse(s1);
//alert(a1[0])

var s2 = '{"left":100}';
var a2 = JSON.parse(s2);
alert(a2.left)
</script>

6.ajax就是拿数据,从接口上取数据,把取到的数据根据不同特性,进行处理    
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 ) {
                if ( xhr.status == 200 ) {
                    //alert( xhr.responseText );
                    var data = JSON.parse( xhr.responseText );//转换
                    
                    var oUl = document.getElementById('ul1');//获取
                    var html = '';//创建HTML
                    //循环当前的数组
                    for (var i=0; i<data.length; i++) {
                        html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
                    }
                    oUl.innerHTML = html;//添加后放到oUl.innerHTML里
                } else {
                    alert('出错了,Err:' + xhr.status);
                }
                //从接口上取数据,把取到的数据根据不同特性,进行处理
                //ajax就是拿数据
            }
        }
6.get方式两个问题
    /*
        1.缓存 在url?后面连接一个随机数,时间戳
        2.乱码 编码encodeURI
    */            //动态文件
        原:xhr.open('get','1.txt',true);
        改:xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);
        -->:    + new Date().getTime() 表示后面连接一个随机数,时间戳,可以使数据实时更新
        -->:    '2.get.php?username='+encodeURI('刘伟')+'&age=30&' 将乱码进行URL编码,表示将汉字转为字符串输出

7.post方式四个问题
            1.数据放在那?
            2.发送的数据类型?
        xhr.open('post','2.post.php',true);
        //post方式,数据放在send()里面作为参数传递   setRequestHeader表示设置请求头,告诉后端发送过去的文档类型是什么
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
            3.post没有缓存问题
            4.无需编码
        xhr.send('username=刘伟&age=30');//数据放在send()里面作为参数传递

8.完整案例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>

window.onload = function() {
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function() {
        var xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        /*
        
        xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);
        xhr.send();
        
        xhr.onreadystatechange = function() {
            if ( xhr.readyState == 4 ) {
                if ( xhr.status == 200 ) {
                    alert( xhr.responseText );
                } else {
                    alert('出错了,Err:' + xhr.status);
                }
            }    
        }
    }
}
</script>
</head>
<body>
    <input type="button" value="按钮" id="btn" />
</body>
</html>

本文由六合联盟网发布于前端技术,转载请注明出处:ajax详细介绍,javascript常用命令

关键词: