zoukankan      html  css  js  c++  java
  • 关于JavaScript等前端概念

    一.JavaScript

    JavaScript是一种网页的编程技术,实现页面的动态交互效果,是一种基于对象和事件驱动的解释性语言。

    Javascript的写法

    方式一:直接定义在事件中。

    方式二:方法写在 <head>里的 <script> 中。

    方式三:将代码写在单独的 js文件中,在 html 页面的<head> 里使用 <script> 引入。

    function myFunction() 
    {
    vax x = //声明一个变量
    if()
    {} //或者需要做的动作。
    }

    (1)用法:脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中,或者放在页面底部。

    这样就可以把它们安置到同一处位置,不会干扰页面的内容。

    (2)变量:使用var关键词来声明变量。

    (3)对象:是拥有属性和方法的数据。

    (4)函数:是包裹在花括号中的代码块,前面使用了关键词 function:

    语法

    function functionname()
    {
    执行代码
    }

    带参数的函数:在调用函数时,您可以向其传递值,这些值被称为参数。这些参数可以在函数中使用。

    可以发送任意多的参数,由逗号 (,) 分隔:myFunction(argument1,argument2)

    当声明函数时,请把参数作为变量来声明:

    function myFunction(var1,var2)
    {
    代码
    }

    变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。

    带有返回值的函数:通过使用 return 语句就可以实现。

    在使用 return 语句时,函数会停止执行,并返回指定的值。

    语法:

    function myFunction()
    {
    var x=5;
    return x;
    }

    (5)函数定义:

    function functionName(parameters) {
    执行的代码
    }

    alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便。

    onclick 事件是众多事件之一。

    document.getElementById("some id")。这个方法是 HTML DOM 中定义的。

    操作HTML元素:如需从 JavaScript 访问某个HTML元素,您可以使用 document.getElementById(id) 方法。 请使用 "id" 属性来标识 HTML 元素,并 innerHTML 来获取或插入元素内容。

    JavaScript方式:

    function myFunction()
    {
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello jQuery";
    }
    onload=myFunction;

    jQuery 方式:

    function myFunction()
    {
    $("#h01").html("Hello jQuery");
    }
    $(document).ready(myFunction);

    JavaScript作用主要包括:

    (1)数据验证(指的是,对表单中的数据进行合法性验证,只有验证通过才能提交)。

    (2)操作网页,实现一些动态效果。

    (3)访问浏览器,获得浏览器的一些信息。(比如获得浏览器的类型、版本等)。

    (4)ajax核心技术之一。

    特点:基于对象,不是纯粹的面向对象的语言,比如,没有定义类的语法,也没有继承和多态。

    解析方式:JOSNObject插件, Jackson插件

    两种方式:

    (1)js方式;

    (2)div,写class方式;

    关系到后台的:写js,没关系到后台的:写class。

    登陆例子:Ajax与jQuery交互

    火狐调试:console.info打印信息。

    解决编码问题:1.页面的编码,2.javascript的编码,3.项目的编码,4.tomcat编码,数据库编码

    服务器的交互:数据的交互---JSP、AJAX。

    二.Ajax

    1、什么是ajax

    asynchronous javascript and xml(异步的javascript和xml)。

    是一种用来改善用户体验的技术,其实质是利用浏览器内置的一个特殊的对象(XMLHttpRequest,一般称之为ajax对象)。

    异步地(ajax对象在向服务器发送请求时,浏览器并不会销毁当前页面,用户仍然可以对当前页面做其它的操作)向服务器发送请求。

    服务器送回部分数据(不是一个完整的新的页面,而是文本或者xml文档),在浏览器端,可以利用这些数据部分更新当前页面,

    整个过程页面无刷新,不会打断用户的操作。

    2、ajax对象

    (1)如何获得ajax对象

    XMLHttpRequest没有标准化,要区分浏览器

    function getXhr(){
      var xhr = null;
    if(window.XMLHttpRequest){

    //非ie浏览器

    xhr = new XMLHttpRequest();
    }else{
    xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
    return xhr;
    }

    (2)属性

    a.onreadystatechange:绑订一个事件处理函数,该函数用来处理readystatechange事件。ajax对象的readyState属性发生改变,比如从0-->1,则会产生readyStatechange事件。

    b.responseText:获得服务器返回的文本数据。

    c.responseXML:获得服务器返回的xml文档。

    d.status: 获得状态码。

    e.readyState:一共有5个值,分别是0,1,2,3,4,表示ajax对象与服务器通讯的状态。其中,4表示ajax对象已经获得了服务器返回的所有的数据。

    3、编程步骤

    step1:获得ajax对象比如:var xhr = getXhr();

    step2:使用ajax对象发请求

    (1)发送get请求

    xhr.open('get','check_username.do?username=zs',true);
    说明:
    true:表示异步请求(ajax对象发请求时,用户可以对当前页面做其它的操作)。
    false:表示同步请求(ajax对象发请求时,浏览器会锁定当前页面,用户只能等待)。
    xhr.onreadystatechange=f1;
    xhr.send(null);

    (2)发送post请求

    xhr.open('post','check_username.do',true);
    xhr.setRequestHeader('content-type',
    'application/x-www-form-urlencoded');
    xhr.onreadstatechange=f1;
    xhr.send('username=zs');

    注意:

    a.与get请求不同,请求参数要放到send方法里面。

    b.因为按照http协议的要求,发送post请求时,应该发送一个content-type消息头。而xhr对象在默认情况下,不会发送这个消息头,所以,需要调用setRequestHeader方法来添加。

    step3:编写服务器端的处理程序,跟以前相比,有一点点改变,就是一般不需要返回一个完整的页面,只需要返回部分的数据。

    step4:编写事件处理函数

    function f1(){
    if(xhr.readyState == 4){
    var txt = xhr.responseText;
    dom操作..
    }
    }

    4、编码问题

    (1)发get请求

    a.乱码问题产生的原因:ie浏览器内置的ajax对象会使用"gbk"对中文参数进行编码,而其它浏览器内置的ajax对象会使用"utf-8"对中文参数进行编码,服务器端,默认会使用"iso-8859-1"去解码。

    因为编码与解码所使用的字符集(编码格式)不一致,所以,会出现乱码问题。

    b.解决:

    step1:设置服务器使用指定的字符集去解码:比如,可以修改tomcat的server.xml配置文件,修改之后要重新启动tomcat。URIEncoding="utf-8" : 告诉服务器,对于所有的get请求,默认使用"utf-8"去解码。

    step2:使用encodeURI函数对请求地址进行编码。encodeURI函数会使用"utf-8“进行编码。

    (2)发post请求

    a.乱码问题产生的原因:所有浏览器内置的ajax对象都会使用"utf-8"对中文参数进行编码,而服务器默认情况下,会使用"iso-8859-1"进行解码。

    b.解决request.setCharacterEncoding("utf-8");

    5、缓存问题

    a.当发送get请求时,ie浏览器内置的ajax对象会检查请求地址是否访问过,如果访问过,则不再向服务器发送请求。

    b.解决方式:

    方式一:在请求地址后面添加一个随机数,比如:xhr.open('get','getNumber.do?' + Math.random(),true);

    方式二:使用post方式发请求。

    6、ajax的优点

    (1)页面无刷新,不打断用户的操作。

    (2)按需获取数据,客户端(浏览器)与服务器端之间数据传输量大大减少。

    (3)是一种标准化的技术,不需要用户下载任何的插件。

    三.JSON (javascript object notation)

    1、json是什么

    是一种轻量级的数据交换技术规范。(因为借鉴了javascript对象创建的一种语法结构,故命名为json)。

    (1)数据交换:将数据转换成一种中间的与平台无关的数据格式(比如xml或者json字符串)发送给另外一方来处理。

    (2)轻量级json相对于xml,所需要的数据大小要小得多,并且解析的速度要更快。

    2、json语法 (www.json.org)

    (1)表示一个对象

    {属性名:属性值,属性名:属性值...}

    注意:

    a.属性名要使用引号括起来。

    b.属性值如果是字符串,要使用引号括起来。

    c.属性值可以是string,number,boolean,null,object。

    (2)表示一个对象组成的数组:[{},{},...]

    (3)如何使用json来编写ajax应用程序

    a.java对象转换成json字符串:一般使用json官方提供的api (json-lib)来实现转换。

    b.json字符串转换成javascript对象:可以使用一些工具提供的方法,比如prototype提供了evalJSON。

    prototype是一个js文件,里面提供了很多常用的函数,

    比如

    a, $(id): document.getElementById(id);
    b, $F(id): $(id).value;
    c, $(id1,id2,id3...): 分别依据id1,id2...查找对应的节点,然后放到一个数组里面返回。
    d, strip(): 除掉字符串两端的空格。
    e, evalJSON():将json字符串转换成对应的javascript对象或者javascript对象组成的数组。

    3、同步请求

    (1)什么是同步请求?ajax对象在向服务器发送请求时,浏览器会锁定当前页面,用户不能够对当前页面做任何的操作。

    (2)如何发送同步请求?open(请求方式,请求地址,false);

    注意:firefox的某些版本(低版本)对于同步支持比较特殊:不能够使用onreadystatechange来绑订一个事件处理函数,而应该在send方法执行之后,立即调用xhr.responseText方法来获得服务器返回的数据。

    (3)优先使用异步,因为同步会影响性能,当服务器端处理比较慢的时候,浏览器会锁定当前页面("假死")。

    (4)只有当客户端需要等待服务器的响应之后,才能继续向下执行,才能使用同步。

    //使用json语法来创建

    var p = {'name':'zs','age':22};

    //使用Object来创建

    var obj = new Object();
    obj.name = 'zs';
    obj.age = 22;
    
    function Person(name,age){
    this.name = name;
    this.age = age;
    }

    //利用javascript函数来创建

    var person1 = new Person("zs",22)
  • 相关阅读:
    Jrain'Lのvueblog
    前端知识整理 の IMWeb
    js编程小练习1
    mac版本cornerstone的无限期破解方法(转)
    教你解锁被锁住的苹果mac电脑的文件跟文件夹,同时也可删除被锁的文件跟文件夹(转)
    Mac下配置svn服务器
    ios 查看模拟器路径以及应用的文件夹
    python怎么解压压缩的字符串数据
    python全局变量被覆盖的问题
    PyInstaller:把你的Python转为Exe
  • 原文地址:https://www.cnblogs.com/ZJOE80/p/13064936.html
Copyright © 2011-2022 走看看