Using document.createElement() to test for browser support for an element

Cross browser scripting is becoming an ever more convoluted game of features versus support. Most of us are familiar with using object detection or the Navigator object to check for backing for a given JavaScript object or method, but these techniques do not work well when the objective is to check whether the browser recognizes a particular HTML element, such as HTML 5's canvas or element. This is where document.createElement() can be very helpful.

To test for support for an element, the basic premise is this:

• Use document.createElement() to dynamically create the element as if the browser supports it.
• Check the newly created object for a known property or JavaScript method that should exist if the browser actually supports this element.
• For INPUT elements, set its TYPE attribute to the target INPUT TYPE you're testing for, and see if the browser retains that value.

document.createElement() behaves as such that it will create an element regardless of whether the browser actually supports it. The true test on the legitimacy of this newly created element is whether or not it supports the properties and methods expected of it, and that's what we exploit here to test for browser support for an element.

  Checking for support for the canvas element of HTML 5

Lets start our parade of examples with a check for support for the canvas element of HTML 5. Standard object detection doesn't work here, since the canvas element isn't automatically represented by a JavaScript object when the page loads.

var test_canvas = document.createElement("canvas") //try and create sample canvas element

var canvascheck=(test_canvas.getContext)? true : false //check if object supports getContext() method, a method of the canvas element

alert(canvascheck) //alerts true if browser supports canvas element

In the above, first we create a "test" canvas element, then see if it's a legitimate canvas object by checking for the getContext() method, which all canvas capable browsers should have. Canvascheck in turn returns a Boolean indicating whether the browser supports the canvas element of HTML 5.

Checking for support for the audio and video elements of HTML 5

Next up, you can also use document.createElement() to check for support for the new audio and video elements of HTML 5. Both elements once defined support a list of methods, one of which is play(). By fishing for this method in the newly created object, we can check whether the browser actually supports these two elements:

var test_audio= document.createElement("audio") //try and create sample audio element

var test_video= document.createElement("video") //try and create sample video element

var mediasupport={audio: (test_audio.play)? true : false, video: (test_video.play)? true : false}

alert("Audio Element support: " + mediasupport.audio + "\n"

+ "Video Element support: " + mediasupport.video

)

Checking the

It's a very handy feature, but obviously one that only works in IE. To see if the browser can handle IE behaviors, first, create a "dummy"

Microsoft Certified Solutions Associate (MCSA)

Microsoft Certified Solutions Associate (MCSA)

The Microsoft Certified Solutions Associate certification is the foundation for higher certifications and prerequisite for the Microsoft Certified Solutions Expert (MCSE). This new certification replaces the older Microsoft Certified Technology Specialist (MCTS).^[3]

Server

• Windows Server 2012
• Windows Server 2008

Desktop

• Windows 8
• Windows 7

Database

• SQL Server 2012

Ajax-II

what is Ajax?

Ajax is asynchronous JavaScript and XML.it can use only those control in your page that post back to server side.it can avid UN usable control that can every time auto post back to server side.Ajax is time consuming .

ex.In your web form 5 control only you have 2 control can auto post back every time at server side. you can add that control in update panel.

What role “#&&” plays in a querysting?

# works as a fragment delimeter in a querysting. With which you can delimit history state.
While && preceeds, state information in query string.

Is there any property names “IsNavigating”?

Yes, it is available when you are managing browser history.
With this property of “IsNavigating”, you can determine if postback is occurred for navigation purpose or for some other.
Its set to true if its navigation call.

What is AjaxControl ToolKit?

AjaxControl Toolkit is an open source project built on top of ajax framework. It has more than 30 controls which are really cool and useful.

Visit this site to find out more about AjaxControlToolKit.

http://www.asp.net/(S(fu2l2uzphr2u3u45q2dnez55))/

ajax/AjaxControlToolkit/Samples/

What will happen with click of browser “back” button among asynchronous requests?

By default, browser will unload the web page and and will return to previous Web page, independent of any asynchronous requests.
Tell name of all the control of Ajax?
There are 5 controls.
1. ScriptManager
2. UpdatePanel
3. UpdateProgress
4. Timer
5. ScriptManageProxy

If there are multiple update panels on the page say Upd1 and Upd2. There is a button placed in Upd1. How can you stop Upd2 to update when button placed in upd1 is clicked?

There is a property called UpdateMode which takes two values
1.Always : Default value of this property.
2.Conditional

When set to conditional, then that updatepanel’s content only gets updated when control placed in that update panel does a postback. Control placed in other update panel will not affect this updatepanel.

How many types of triggers are there in update panel?

There are 2 types of triggers.
1. PostBackTrigger : It does a full postback. This is useful when any such control which placed within updatePanel but it cannot work asynchronously. Like File Upload Control.
2. AsyncPostBackTrigger :- It does partial post back asynchronously.

What is the DisplayAfter property in UpdateProgress control?

Displayafter property specifies after how many seconds the loading image needs to be displayed in ajax postback. It takes values in seconds.

Is it compulsory to have Script manager on the page when you are using any control of ajax control tool kit?

Yes. Page needs to have a script manager for ajax control tool kit controls to work.

Is it possible to use FileUpload control within the update panel?

Yes, it’s possible. But we need to use Postback triggers to upload the file.

Which property needs to be set for script manager control to extend the time before throwing time out expection if no response is received from the server?

AsyncPostBackTimeout Property needs to set which gets or sets a value that indicates the time, in seconds, before asynchronous postback time out if no response is received from the server.

How do I handle the back and forward buttons?While you could go out and create a custom solution that tracks the current state on your application I recommend you leave this to the experts. Dojo addresses the navigation in a browser neutral way as can be seen in the JavaScript example below.
function updateOnServer(oldId, oldValue,
itemId, itemValue) {
var bindArgs = {
url: “faces/ajax-dlabel-update”,
method: “post”,
content: {“component-id”: itemId, “component-value”:
itemValue},
mimetype: “text/xml”,
load: function(type, data) {
processUpdateResponse(data);
},
backButton: function() {
alert(“old itemid was ” + oldId);
},
forwardButton: function(){
alert(“forward we must go!”);
}
};
dojo.io.bind(bindArgs);
}

The example above will update a value on the server using dojo.io.bind() with a function as a property that is responsible for dealing with the browser back button event. As a developer you are capable of restoring the value to the oldValue or taking any other action that you see fit. The underlying details of how the how the browser button event are detected are hidden from the developer by Dojo.
AJAX: How to Handle Bookmarks and Back Buttons details this problem and provides a JavaScript library Really Simple History framework (RSH) that focuses just on the back and forward issue.

How does HTML_AJAX compare with the XAJAX project at Sourceforge?
XAJAX uses XML as a transport for data between the webpage and server, and you don’t write your own javascript data handlers to manipulate the data received from the server. Instead you use a php class and built in javascript methods, a combination that works very similiar to the HTML_AJAX_Action class and haSerializer combo. XAJAX is designed for simplicity and ease of use.
HTML_AJAX allows for multiple transmission types for your ajax data – such as urlencoding, json, phpserialized, plain text, with others planned, and has a system you can use to write your own serializers to meet your specific needs. HTML_AJAX has a class to help generate javascript (HTML_AJAX_Helper) similiar to ruby on rail’s javascript helper (although it isn’t complete), and an action system similiar to XAJAX’s “action pump” that allows you to avoid writing javascript data handlers if you desire.
But it also has the ability to write your own data handling routines, automatically register classes and methods using a server “proxy” script, do different types of callbacks including grabbing remote urls, choose between sync and async requests, has iframe xmlhttprequest emulation fallback capabilities for users with old browsers or disabled activeX, and is in active development with more features planned (see the Road Map for details)
HTML_AJAX has additional features such as client pooling and priority queues for more advanced users, and even a javascript utility class. Although you can use HTML_AJAX the same way you use XAJAX, the additional features make it more robust, extensible and flexible. And it is a pear package, you can use the pear installer to both install and keep it up to date.
If you’re asking which is “better” – as with most php scripts it’s a matter of taste and need. Do you need a quick, simple ajax solution? Or do you want something that’s flexible, extensible, and looking to incorporate even more great features? It depends on the project, you as a writer, and your future plans.

What browsers support AJAX?
Internet Explorer 5.0 and up, Opera 7.6 and up, Netscape 7.1 and up, Firefox 1.0 and up, Safari 1.2 and up, among others.

Will HTML_AJAX integrate with other Javascript AJAX libraries such as scriptaculous ? How would this integration look like?
HTML_AJAX doesn’t have specific plans to integrate with other JavaScript libraries. Part of this is because external dependencies make for a more complicated installation process. It might make sense to offer some optional dependencies on a library like scriptaculous automatically using its visual effects for the loading box or something, but there isn’t a lot to gain from making default visuals like that flashier since they are designed to be easily replaceable.

Most integration would take place in higher level components. Its unclear whether higher level components like that should be part of HTML_AJAX delivered through PEAR or if they should just be supported by HTML_AJAX and made available from http://htmlajax.org or some other site. If your interested in building widgets or components based on HTML_AJAX please let me know.

HTML_AJAX does however offer the ability to use its library loading mechanism with any JavaScript library. I use scriptaculous in conjunction with HTML_AJAX and I load both libraries through the server.

To do this you just need to register the library with your server and load add its flag to your include line.

$this->server->registerJSLibrary(‘scriptaculous’,
array(‘prototype.js’,'scriptaculous.js’,'builder.js’,'effects.js’,'dragdrop.js’,'controls.js’,'slider.js’), ‘/pathto/scriptaculous/’);?>

Is the server or the client in control?It depends. With AJAX the answer is more in between. Control can be more centralized in a server-side component or as a mix of client-side and server-side controllers.

* Centralized server-side controller – When having a more centralized controller the key is to make sure the data in client-side page is in sync with that of the server. Some applications may keep all the state on the server and push all updates to client DOM via a simple JavaScript controller.
* Client and server-side controllers – This architecture would use JavaScript to do all presentation related control, event processing, page manipulation, and rendering of model data on the client. The server-side would be responsible for things such as business logic and pushing updated model data to the client. In this case the server would not have intimate knowledge of the presentation short of the initial page that would be sent to the client page request.

There are some use cases where an entire AJAX application can be written in a single page. Keep in mind if you choose this type of architecture that navigation and bookmarking should be considered.
Both methods are viable depending on what you are trying to accomplish. I tend to prefer spreading the control across the client and server.

Is Ajax just another name for XMLHttpRequest?
No. XMLHttpRequest is only part of the Ajax equation. XMLHttpRequest is the technical component that makes the asynchronous server communication possible; Ajax is our name for the overall approach described in the article, which relies not only on XMLHttpRequest, but on CSS, DOM, and other technologies.

How do I abort the current XMLHttpRequest?
Just call the abort() method on the request.

What is the minimum version of PHP that needs to be running in order to use HTML_AJAX?
The oldest PHP version i’ve fully tested HTML_AJAX is 4.3.11, but it should run on 4.2.0 without any problems. (Testing reports from PHP versions older then 4.3.11 would be appreciated.)

Why does HTML_AJAX hang on some server installs
If you run into an HTML_AJAX problem only on some servers, chances are your running into a problem with output compression. If the output compression is handled in the PHP config we detect that and do the right thing, but if its done from an apache extension we have no way of knowing its going to compress the body. Some times setting HTML_AJAX::sendContentLength to false fixes the problem, but in other cases you’ll need to disabled the extension for the AJAX pages.
I’ve also seen problems caused by debugging extensions like XDebug, disabling the extension on the server page usually fixes that. Questions dealing with Using HTML_AJAX, and general JavaScript development

How do I get the XMLHttpRequest object?
Depending upon the browser… if (window.ActiveXObject) { // Internet Explorer http_request = new ActiveXObject(“Microsoft.XMLHTTP”); } else if…

Are there any security issues with AJAX?
JavaScript is in plain view to the user with by selecting view source of the page. JavaScript can not access the local filesystem without the user’s permission. An AJAX interaction can only be made with the servers-side component from which the page was loaded. A proxy pattern could be used for AJAX interactions with external services.
You need to be careful not to expose your application model in such as way that your server-side components are at risk if a nefarious user to reverse engineer your application. As with any other web application, consider using HTTPS to secure the connection when confidential information is being exchanged.

What about applets and plugins ?
Don’t be too quick to dump your plugin or applet based portions of your application. While AJAX and DHTML can do drag and drop and other advanced user interfaces there still limitations especially when it comes to browser support. Plugins and applets have been around for a while and have been able to make AJAX like requests for years. Applets provide a great set of UI components and APIs that provide developers literally anything.
Many people disregard applets or plugins because there is a startup time to initialize the plugin and there is no guarantee that the needed version of a plugin of JVM is installed. Plugins and applets may not be as capable of manipulating the page DOM. If you are in a uniform environment or can depend on a specific JVM or plugin version being available (such as in a corporate environment) a plugin or applet solution is great.
One thing to consider is a mix of AJAX and applets or plugins. Flickr uses a combination of AJAX interactions/DHTML for labeling pictures and user interaction and a plugin for manipulating photos and photo sets to provide a great user experience. If you design your server-side components well they can talk to both types of clients.

Why did you feel the need to give this a name?
I needed something shorter than “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest” to use when discussing this approach with clients.

Is AJAX code cross browser compatible?
Not totally. Most browsers offer a native XMLHttpRequest JavaScript object, while another one (Internet Explorer) require you to get it as an ActiveX object….

Techniques for asynchronous server communication have been around for years. What makes Ajax a “new” approach?What’s new is the prominent use of these techniques in real-world applications to change the fundamental interaction model of the Web. Ajax is taking hold now because these technologies and the industry’s understanding of how to deploy them most effectively have taken time to develop.

Is Ajax a technology platform or is it an architectural style?
It’s both. Ajax is a set of technologies being used together in a particular way.