首页 > 技术文章 > 关于JavaScript等前端概念

ZJOE80 2020-06-08 12:13 原文

一.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)

 

推荐阅读